如何在 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>

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

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