在 react-router-v4 中，您不嵌套 <Routes />。相反，您将它们放在另一个 <Component /> 中。

例如

<Route path='/topics' component={Topics}>
  <Route path='/topics/:topicId' component={Topic} />
</Route>

应该成为

<Route path='/topics' component={Topics} />

和

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
) 

这是直接来自 react-router documentation 的 basic example。

反应路由器 v6

2022 年更新 - v6 包含 Just Work™ 的嵌套 Route 组件。

这个问题是关于 v4/v5 的，但现在最好的答案是尽可能使用 v6！

请参阅 this blog post 中的示例代码。但是，如果您还不能升级...

反应路由器 v4 & v5

确实，为了嵌套 Route，您需要将它们放置在 Route 的子组件中。

但是，如果您喜欢更内联的语法，而不是将您的 Route 拆分为多个组件，您可以为要嵌套在其下的 Route 的 render 属性提供一个功能组件。

<BrowserRouter>

  <Route path="/" component={Frontpage} exact />
  <Route path="/home" component={HomePage} />
  <Route path="/about" component={AboutPage} />

  <Route
    path="/admin"
    render={({ match: { url } }) => (
      <>
        <Route path={`${url}/`} component={Backend} exact />
        <Route path={`${url}/home`} component={Dashboard} />
        <Route path={`${url}/users`} component={UserPage} />
      </>
    )}
  />

</BrowserRouter>

如果您对为什么应该使用 render 属性而不是 component 属性感兴趣，那是因为它会阻止内联功能组件在每次渲染时重新安装。 See the documentation 了解更多详情。

_{请注意，该示例将嵌套路由包装在 Fragment 中。在 React 16 之前，您可以改用容器 <div>。}

只是想提一下，自从发布/回答了这个问题以来，react-router v4 发生了根本性的变化。

不再有 <Match> 组件！ <Switch> 是为了确保只呈现第一个匹配项。 <Redirect> 好 .. 重定向到另一条路线。使用或省略 exact 来输入或排除部分匹配。

请参阅文档。他们都是伟大的。 https://reacttraining.com/react-router/

这是一个例子，我希望可以用来回答你的问题。

<Router>
  <div>
    <Redirect exact from='/' to='/front'/>
    <Route path="/" render={() => {
      return (
        <div>
          <h2>Home menu</h2>
          <Link to="/front">front</Link>
          <Link to="/back">back</Link>
        </div>
      );
    }} />          
    <Route path="/front" render={() => {
      return (
        <div>
        <h2>front menu</h2>
        <Link to="/front/help">help</Link>
        <Link to="/front/about">about</Link>
        </div>
      );
    }} />
    <Route exact path="/front/help" render={() => {
      return <h2>front help</h2>;
    }} />
    <Route exact path="/front/about" render={() => {
      return <h2>front about</h2>;
    }} />
    <Route path="/back" render={() => {
      return (
        <div>
        <h2>back menu</h2>
        <Link to="/back/help">help</Link>
        <Link to="/back/about">about</Link>
        </div>
      );
    }} />
    <Route exact path="/back/help" render={() => {
      return <h2>back help</h2>;
    }} />
    <Route exact path="/back/about" render={() => {
      return <h2>back about</h2>;
    }} />
  </div>
</Router>

希望它有帮助，让我知道。如果这个例子不能很好地回答你的问题，请告诉我，我会看看我是否可以修改它。

我通过用 Switch 包装成功地定义了嵌套路由，并在根路由之前定义了嵌套路由。

<BrowserRouter>
  <Switch>
    <Route path="/staffs/:id/edit" component={StaffEdit} />
    <Route path="/staffs/:id" component={StaffShow} />
    <Route path="/staffs" component={StaffIndex} />
  </Switch>
</BrowserRouter>

参考：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

使用钩子

钩子的最新更新是使用 useRouteMatch。

主路由组件

export default function NestingExample() {
  return (
    <Router>
      <Switch>
       <Route path="/topics">
         <Topics />
       </Route>
     </Switch>
    </Router>
  );
}

子组件

function Topics() {
  // The `path` lets us build <Route> paths 
  // while the `url` lets us build relative links.

  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>
      <h5>
        <Link to={`${url}/otherpath`}>/topics/otherpath/</Link>
      </h5>
      <ul>
        <li>
          <Link to={`${url}/topic1`}>/topics/topic1/</Link>
        </li>
        <li>
          <Link to={`${url}/topic2`}>/topics/topic2</Link>
        </li>
      </ul>

      // You can then use nested routing inside the child itself
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={`${path}/otherpath`>
          <OtherPath/>
        </Route>
      </Switch>
    </div>
  );
}

像这样的东西。

从“反应”导入反应；从 'react-router-dom' 导入 { BrowserRouter as Router, Route, NavLink, Switch, Link }；导入'../assets/styles/App.css'； const Home = () =>

HOME

React Router v6 或版本 6 的完整答案，以备不时之需。

import Dashboard from "./dashboard/Dashboard";
import DashboardDefaultContent from "./dashboard/dashboard-default-content";
import { Route, Routes } from "react-router";
import { useRoutes } from "react-router-dom";

/*Routes is used to be Switch*/
const Router = () => {

  return (
    <Routes>
      <Route path="/" element={<LandingPage />} />
      <Route path="games" element={<Games />} />
      <Route path="game-details/:id" element={<GameDetails />} />
      <Route path="dashboard" element={<Dashboard />}>
        <Route path="/" element={<DashboardDefaultContent />} />
        <Route path="inbox" element={<Inbox />} />
        <Route path="settings-and-privacy" element={<SettingsAndPrivacy />} />
        <Route path="*" element={<NotFound />} />
      </Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};
export default Router;

import DashboardSidebarNavigation from "./dashboard-sidebar-navigation";
import { Grid } from "@material-ui/core";
import { Outlet } from "react-router";

const Dashboard = () => {
  return (
    <Grid
      container
      direction="row"
      justify="flex-start"
      alignItems="flex-start"
    >
      <DashboardSidebarNavigation />
      <Outlet />
    </Grid>
  );
};

export default Dashboard;

Github 仓库在这里。 https://github.com/webmasterdevlin/react-router-6-demo

反应路由器 v6

允许使用嵌套路由（如在 v3 中）和单独的拆分路由（v4、v5）。

嵌套路由

为中小型应用保留所有路线 in one place：

<Routes>
  <Route path="/" element={<Home />} >
    <Route path="user" element={<User />} /> 
    <Route path="dash" element={<Dashboard />} /> 
  </Route>
</Routes>

const App = () => { return ( // /js 是堆栈片段的起始路径 } > } /> } /> ); } const Home = () => { const location = useLocation() return (

// inside App.jsx:
<Routes>
  <Route path="/*" element={<Home />} />
</Routes>

// inside Home.jsx:
<Routes>
  <Route path="user" element={<User />} />
  <Route path="dash" element={<Dashboard />} />
</Routes>