如何正确编写React嵌套路由？/English/GRE路由加载失败

错误原因 #

你用的是React Router v6，这个版本里嵌套路由必须通过父路由的children属性明确声明，单纯靠代码缩进不会形成嵌套关系。你现在的代码里，GRE、Confusingwords、Mnemonics和English、Blog是同级路由，不是English的子路由，所以访问/English/GRE时找不到对应的匹配规则，就会报错。

解决步骤 #

1. 把GRE、Confusingwords、Mnemonics嵌套到English路由的children中
2. 在English组件内部添加<Outlet />（需从react-router-dom导入），用来渲染子路由对应的组件

修正后的代码 #

import { Outlet } from 'react-router-dom'; // 别忘了导入Outlet

function App() {
  return (
    <>
      <Router>
        <Navbar/>
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path='English' element={<English />}>
            {/* 这里的路由是English的子路由 */}
            <Route path='GRE' element={<GRE />}/>
            <Route path='Confusingwords' element={<Confusingwords />}/>
            <Route path='Mnemonics' element={<Mnemonics />}/>
          </Route>
          <Route path='Blog' element={<Blog />}/>
        </Routes>
      </Router>
    </>
  );
}

// English组件示例
function English() {
  return (
    <div>
      <h1>English页面</h1>
      <Outlet /> {/* 子路由的内容会在这里渲染 */}
    </div>
  );
}

export default App;

这样修改后，访问/English/GRE就能正确匹配到对应的路由并渲染组件了。

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