React Router+MUI面包屑：动态URL跳转后页面空白问题求助

问题背景 #

现有三个组件层级与URL对应关系：

• Content：https://localhost/content
• BlogRepo：https://localhost/content/<blog_repo_id>
• CreateBlog：https://localhost/content/createblog/?blogrepoId=xxxxxx

路由配置中，/content/:bgid对应BlogsRepo组件，通过useParams传递参数可正常渲染。但在CreateBlog组件的MUI面包屑中，点击生成的/content/${blogrepoid}链接时，URL显示正确但页面空白，无法加载BlogRepo内容。

解决方案 #

1. 调整路由顺序与路径 #

当前路由中，/content/:bgid会优先匹配/content/createblog（createblog会被当作动态参数bgid的值），导致BlogRepo组件接收到无效参数无法渲染。需将更具体的CreateBlog路由放在动态路由前面：

<BrowserRouter>
  <Routes>
    <Route
      path="/content"
      element={
        <RequireAuth>
          <Content />
        </RequireAuth>
      }
    />
    {/* 具体路由前置，避免被动态路由匹配 */}
    <Route
      path="/content/createblog"
      element={
        <RequireAuth>
          <CreateBlog />
        </RequireAuth>
      }
    />
    <Route
      path="/content/:bgid"
      element={
        <RequireAuth>
          <BlogsRepo />
        </RequireAuth>
      }
    />
    <Route path="*" element={<ErrorPage />} />
  </Routes>
</BrowserRouter>

2. 使用React Router的客户端导航 #

不要用原生href跳转（会触发页面刷新），改用React Router的Link组件实现单页应用的客户端导航。结合MUI的Link组件写法如下：

首先导入RouterLink：

import { Link as RouterLink } from 'react-router-dom';

修改面包屑链接：

<Link
  underline="hover"
  sx={{ color: "primary", fontSize: "15px" }}
  component={RouterLink}
  to={`/content/${blogrepoid}`}
>
  {blogreponame}
</Link>

3. 验证BlogRepo组件的参数获取 #

确保BlogRepo组件中正确通过useParams获取路由参数，参数名需与路由配置中的:bgid一致：

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

function BlogsRepo() {
  const { bgid } = useParams();
  // 使用bgid获取对应博客仓库数据，而非其他参数名
  // ...组件逻辑
}

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