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

Posted 2023-02-22

【中文标题】如何在react-router-dom中嵌套路由[重复]

【英文标题】：how to nest routes in react-router-dom [duplicate]

【发布时间】：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 工作 我尝试了上述方法，但是当我转到这些路线中的任何一条时，输出都是空白的。仅呈现导航栏。

【问题讨论】：

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

【参考方案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