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

Question

我有类似这样的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>

我需要使/search ch结果/所有，/search ch结果/课程和搜索结果/幻灯片工作
我尝试了上述方法，但输出是空白的，当我去任何这些路线。只有Navbar被渲染。

Answer 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