React Router 不显示子页面

Question

我目前正在一个提供探险的网站上工作，其中一个页面应该在其中包含嵌套路线，例如：/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 router - Navigate inner pages with sub route

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

Answer 1

问题

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

解决方案

查看官方Route Nesting Demo

移除 Expeditions 中的嵌套 Router，您只需要一个路由器来处理您应用中的导航。您也不想在 render 方法中声明一个 OverviewThumbs 组件，因为这将在 Expeditions 重新呈现时重新挂载。您可以安全地在呈现的 return.

中呈现该 JSX

使用当前 match.url 为 link 添加下一个路线段。

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}/>

React Router 不显示子页面

Sub pages not showing with React Router

javascript

nested-routes

reactjs

react-router

react-router-dom

App.js

Expeditions.js

参考资料

问题

解决方案