如何在react-router-dom中嵌套路由[重复]答案

【问题标题】：how to nest routes in react-router-dom [duplicate]如何在react-router-dom中嵌套路由[重复]
【发布时间】：2020-09-22 12:22:13
【问题描述】：

我有类似这样的 App.js 文件

import {BrowserRouter,Switch,Route} from 'react-router-dom'

<BrowserRouter>
   <Switch>
      <Route exact path="/" component={LandingPage} />
      <Route path="/searchResults" component={SearchResults} />
   </Switch>
</BrowserRouter>

{SearchResults} 看起来像这样

<Navbar />
<Switch>
   <Route path="/all" component={All} />
   <Route path="/courses" component={Courses} />
   <Route path="/slides" component={Slides} />
</Switch>

我需要让 /searchResults/all、/searchResults/courses 和 searchResults/slides 工作
我尝试了上述方法，但是当我转到这些路线中的任何一条时，输出都是空白的。仅呈现导航栏。

【问题讨论】：

这很有帮助stackoverflow.com/questions/42984597/…

标签： javascript reactjs routes react-router react-router-dom

【解决方案1】：

您需要将基本路径添加到链接。

import { Switch, Route, useRouteMatch } from "react-router-dom";

const SearchResults = () => {
let { path } = useRouteMatch();
    return (
        <Switch>
            <Route path={`${path}/all`} component={All} />
            <Route path={`${path}/courses`} component={Courses} />
            <Route path={`${path}/slides`} component={Slides} />
        </Switch>
    );
)

在我的示例应用程序之一中找到它

https://github.com/codegeous/react-component-depot/blob/master/src/pages/ReactBasics/index.js

【讨论】：