【问题标题】：Sub pages not showing with React RouterReact Router 不显示子页面
【发布时间】：2021-10-28 10:43:23
【问题描述】：

我目前正在开发一个提供探险的网站，其中一个页面应该有嵌套路由，例如：/expeditions/antarcticasouthgeorgia。

我一直在关注有关此问题的其他一些问题，但我似乎无法让我的实现工作。

我的代码和参考如下所示。我很感激帮助。谢谢！

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <ScrollToTop/>
          <NavMenu />
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route exact path="/expeditions" component={Expeditions}/>
            <Route path="/expeditions/antarticasouthgeorgia" component={InnerExpeditions}/>
            <Route path="/about" component={About}/>
            <Route path="/contact" component={Contact}/>
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

Expeditions.js

class Expeditions extends Component {
    render() {

        const OverviewThumbs = (props) => {
            return (
                props.data.map((item, index) => {
                    return (
                        <Col sm={6} lg={4}>
                            <Link to={item.url} className={`overview_thumbs overview_thumbs-${index}`} style={{ backgroundImage: `url(${item.image})` }}>
                                <div className="overview_header">
                                    {item.title}
                                </div>
                            </Link>
                        </Col>
                    )
                })
            )
        }

        const data = [
            {
                title: 'Antartica & South Georgia',
                image: contentImg1,
                url: '/antarticasouthgeorgia'
            },
        ]

        return (
            <div className="page-fade-in expeditions rootPadding">
                <Container fluid className="content overview px-0 pb-0" >
                    <Row className="g-0">
                        <Router basename="/expeditions">
                            <OverviewThumbs data={data} />
                        </Router>
                    </Row>
                </Container>
            </div>
        );
    }
}

export default Expeditions;

参考

React how to create sub pages with react router to display?

React router - Navigate inner pages with sub route

https://www.youtube.com/watch?v=9z-X7UUid9Q

【问题讨论】：

你能展示一下你现在的行为吗？

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

【解决方案1】：

问题

您正在渲染多个Router。内部路由器是最近的路由上下文，将处理来自其子级的任何导航请求。外部路由器正在渲染路由。由于内部路由器处理导航请求，因此外部路由器永远不知道渲染不同的路线。

解决方案

查看官方Route Nesting Demo

去掉Expeditions中嵌套的Router，你只需要一个路由器来处理你应用中的导航。您也不想在render 方法中声明OverviewThumbs 组件，因为这将在Expeditions 重新渲染时重新挂载。您可以安全地在渲染返回中渲染该 JSX。

使用当前的match.url 将下一个路段附加到链接。

class Expeditions extends Component {
  render() {
    const { url } = this.props.match;
    ...

    return (
      <div className="page-fade-in expeditions rootPadding">
        <Container fluid className="content overview px-0 pb-0" >
          <Row className="g-0">
            {props.data.map((item, index) => (
              <Col key={item.url} sm={6} lg={4}>
                <Link
                  to={`${url}/${item.url}`} // <-- link to nested route
                  className={`overview_thumbs overview_thumbs-${index}`} 
                  style={{ backgroundImage: `url(${item.image})` }}
                >
                  <div className="overview_header">
                    {item.title}
                  </div>
                </Link>
              </Col>
            ))}
          </Row>
        </Container>
      </div>
    );
  }
}

此外，对于Switch 组件，路径顺序和特异性也很重要。您将希望以递减的特异性对路径进行排序。这允许路径匹配更自然地工作，您无需在每条路由上指定 exact 属性。

<Switch>
 <Route path="/expeditions/antarticasouthgeorgia" component={InnerExpeditions}/>
 <Route path="/expeditions" component={Expeditions}/>
 <Route path="/about" component={About}/>
 <Route path="/contact" component={Contact}/>
 <Route path='/' component={Home}/>

【讨论】：