如何结合Router实现MUI Dashboard主内容区路由切换（详情页跳转）

1. 完善路由配置 #

首先在AppProvider的路由配置中，为详情页添加嵌套路由（MUI Dashboard通常用<Outlet />承载主内容区，列表页和详情页需作为布局的子路由）：

import { Routes, Route, Outlet } from 'react-router-dom';
import DashboardLayout from './DashboardLayout'; // 你的MUI布局组件
import JobList from './JobList';
import JobDetail from './JobDetail';

function App() {
  return (
    <Routes>
      {/* 外层Dashboard布局，子路由通过Outlet渲染到主内容区 */}
      <Route path="/" element={<DashboardLayout />}>
        <Route path="jobs" element={<JobList />} />
        {/* 带jobId参数的详情页路由 */}
        <Route path="jobs/:jobId" element={<JobDetail />} />
        {/* 其他页面路由... */}
      </Route>
    </Routes>
  );
}

2. 给列表行添加跳转逻辑 #

在JobList组件中，使用useNavigate钩子实现点击行跳转，给每行绑定点击事件并传递对应ID：

import { useNavigate } from 'react-router-dom';
import { TableRow, TableCell } from '@mui/material';

function JobList() {
  const navigate = useNavigate();
  // 示例数据，实际从接口/状态中获取
  const jobs = [
    { id: '1', title: '前端开发工程师', company: 'XX科技' },
    { id: '2', title: '后端开发工程师', company: 'YY公司' }
  ];

  const handleRowClick = (jobId) => {
    // 跳转到对应详情页，携带jobId参数
    navigate(`/jobs/${jobId}`);
  };

  return (
    <Table>
      {/* 表格表头省略 */}
      <tbody>
        {jobs.map((job) => (
          <TableRow 
            key={job.id} 
            onClick={() => handleRowClick(job.id)}
            sx={{ cursor: 'pointer', '&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' } }}
          >
            <TableCell>{job.title}</TableCell>
            <TableCell>{job.company}</TableCell>
          </TableRow>
        ))}
      </tbody>
    </Table>
  );
}

3. 在详情页获取参数并加载数据 #

在JobDetail组件中，用useParams钩子获取路由参数，再根据ID加载对应详情数据：

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Typography, Box } from '@mui/material';

function JobDetail() {
  const { jobId } = useParams();
  const [jobDetail, setJobDetail] = useState(null);

  useEffect(() => {
    const fetchJobDetail = async () => {
      // 替换为实际接口请求
      const res = await fetch(`/api/jobs/${jobId}`);
      const data = await res.json();
      setJobDetail(data);
    };

    jobId && fetchJobDetail();
  }, [jobId]);

  if (!jobDetail) {
    return <Typography>加载中...</Typography>;
  }

  return (
    <Box>
      <Typography variant="h4">{jobDetail.title}</Typography>
      <Typography variant="subtitle1">公司：{jobDetail.company}</Typography>
      <Typography variant="body1" mt={2}>
        {jobDetail.description}
      </Typography>
      {/* 其他详情内容 */}
    </Box>
  );
}

关键注意点 #

• 确保DashboardLayout组件中包含<Outlet />，子路由内容才会渲染到主内容区。
• 若你的路由结构并非嵌套，直接在顶层路由中添加详情页路由即可，跳转逻辑保持不变。

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