React中点击组件跳转至指定URL并传递隐藏参数的实现方法

嘿，我来帮你解决这个需求！要实现点击Material-UI的CardActionArea后跳转到/userinfo页面，同时传递不显示在URL里的region和username参数，咱们可以借助react-router-dom来实现，具体步骤如下：

1. 先确认安装react-router-dom #

如果你的项目还没装这个依赖，先执行命令安装：

npm install react-router-dom
# 或者用yarn的话
yarn add react-router-dom

2. 重构App.tsx的路由结构 #

原来你直接在App里渲染<Hook />，现在咱们改成路由配置的方式，用BrowserRouter把整个应用包起来，这样才能实现路由跳转：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import Hook from './Hook'; // 替换成你Hook组件的实际路径
import { useState } from 'react';

// 要是你的App原来是类组件，建议改成函数组件，适配react-router v6的写法更方便
function App() {
  // 这里保留你原来的状态管理，比如region和user
  const [region, setRegion] = useState('默认区域');
  const [user, setUser] = useState({ username: '默认用户名' });

  return (
    <Router>
      <Routes>
        {/* 首页路由，把需要传递的参数传给HomePage */}
        <Route path="/" element={<HomePage region={region} username={user.username} />} />
        {/* 配置/userinfo路径对应Hook组件 */}
        <Route path="/userinfo" element={<Hook />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 修改HomePage.tsx实现点击跳转 #

在HomePage里用useNavigate钩子来触发跳转，把参数放在state里——这部分参数不会出现在URL里哦：

import { useNavigate } from 'react-router-dom';
import { Card, CardActionArea, CardContent, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';

// 可以给Card加个样式，看起来更舒服
const StyledCard = styled(Card)(({ theme }) => ({
  maxWidth: 345,
  margin: theme.spacing(2),
  cursor: 'pointer',
}));

// 定义HomePage的props类型，接收从App传过来的参数
interface HomePageProps {
  region: string;
  username: string;
}

function HomePage({ region, username }: HomePageProps) {
  const navigate = useNavigate();

  const handleCardClick = () => {
    // 跳转到/userinfo页面，同时把参数塞进state里
    navigate('/userinfo', {
      state: {
        region,
        username
      }
    });
  };

  return (
    <StyledCard>
      <CardActionArea onClick={handleCardClick}>
        <CardContent>
          <Typography variant="h6">UserInfo</Typography>
        </CardContent>
      </CardActionArea>
    </StyledCard>
  );
}

export default HomePage;

4. 在Hook组件里接收参数 #

最后在你的Hook组件里，用useLocation钩子取出传递过来的参数就行：

import { useLocation } from 'react-router-dom';

function Hook() {
  const location = useLocation();
  // 解构参数的时候加个空值判断，避免页面刷新或者首次加载时报错
  const { region = '', username = '' } = location.state || {};

  return (
    <div>
      <h2>用户信息页面</h2>
      <p>当前区域：{region}</p>
      <p>用户名：{username}</p>
    </div>
  );
}

export default Hook;

小提醒 #

• 这种用state传参的方式，参数是存在内存里的，用户刷新页面后参数会丢失哦。如果需要刷新后还能保留参数，你可以结合localStorage把参数存起来，不过这就看你的需求啦。
• 建议用react-router-dom的v6版本，这是现在的主流版本，写法也更简洁。

内容的提问来源于stack exchange，提问作者aishu8333