React Router v6路径变化但页面内容不更新问题求助

这个问题我之前也碰到过！核心原因是你在使用React Router v6的嵌套路由时，父组件（App）没有指定子路由内容的渲染位置——也就是缺少了<Outlet />组件。另外你的index路由写法也有小问题，我来一步步帮你解决：

1. 修正App组件，添加子路由渲染容器 #

React Router v6要求嵌套路由的父组件必须通过<Outlet />来标记子路由组件的渲染位置。同时我们可以利用MUI的Grid布局实现你想要的“左侧固定面板+右侧切换内容”的效果：

修改后的app.js代码：

import Navbar from './components/navbar/Navbar';
import Grid from '@mui/material/Grid';
import { Outlet } from 'react-router-dom'; // 新增导入Outlet

function App() {
  return (
    <Grid container>
      {/* 左侧固定导航面板 */}
      <Grid xs={2} item style={{ position: 'fixed', height: '100vh' }}>
        <Navbar />
      </Grid>
      {/* 右侧内容区域，用于渲染子路由组件 */}
      <Grid xs={10} item style={{ marginLeft: 'calc(100% / 6)' }}>
        <Outlet />
      </Grid>
    </Grid>
  );
}

export default App;

这里给左侧Grid加了position: fixed和height: 100vh让它固定在左侧占满全屏高度，右侧Grid用marginLeft避开左侧面板的宽度，保证内容不会被遮挡。

2. 修正index.js中的路由配置 #

你原来的index路由同时写了index和path属性，这在React Router v6里是错误的——index路由是父路径下的默认子路由，不需要设置path。如果希望访问根路径/时默认显示Authentication组件，就用index路由；如果根路径只显示导航栏，那可以去掉index路由，只保留带path的子路由：

修改后的index.js路由部分：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App/>} >
          {/* 根路径默认显示Authentication组件 */}
          <Route index element={<Authentications />} />
          {/* 其他子路由 */}
          <Route path="authentication" element={<Authentications />} />
          <Route path="database" element={<Database />} />
          <Route path="functions" element={<Functions />} />
          <Route path="hosting" element={<Hosting />} />
          <Route path="storage" element={<Storage />} />
          <Route path="machine-learning" element={<MachineLearning />} />
        </Route>
      </Routes>
    </BrowserRouter>,
  </React.StrictMode>
);

为什么这样改就可以？ #

• <Outlet />是React Router v6提供的专门用于渲染嵌套子路由的组件，它相当于子路由内容的“占位符”，没有它的话，子路由组件就没有地方渲染。
• 调整Grid布局后，左侧Navbar固定，右侧区域会根据当前路由自动切换显示对应的子组件（比如访问/authentication时显示Authentications，访问/database时显示Database）。

这样修改后，你的路由应该就能正常工作，同时实现你想要的布局效果啦！

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