路由内的路由 - 嵌套路由 - react.js答案

【问题标题】：Route inside Route - nesting routes - react.js路由内的路由 - 嵌套路由 - react.js
【发布时间】：2020-07-18 13:58:09
【问题描述】：

我一直在 github 上寻找我的问题的答案，但对我没有任何帮助..

我的问题是，当我在 Reservation 组件中使用 Link 时，它会更改路径，但不会更改可见组件并且页面会变为空。摘要组件现在应该只用一些文本渲染 h1。我必须做什么才能使这些组件正常工作？

顺便说一句，我使用 react v16.13.1 和 react-router-dom v4.3.1

/* 应用组件 */

const App = () => (
  <Router>
    <div className="app">
      <Navigation />

      <hr />

      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route exact path="/sign-in" component={SignInPage} />
        <Route exact path="/pw-forget" component={PasswordForgetPage} />
        <Route exact path="/reservation" component={Reservation} />
        <Route exact path="/account" component={AccountPage} />
        <Route exact path="/reservations" component={Reservations} />
      </Switch>

    </div>
  </Router>
);

/* 预留组件 */

class Reservation extends React.Component {

  render() {
    return (

         <Link to="/reservation/summary">Podsumowanie</Link>

        <Switch>
          <Route exact path="/reservation/summary" component={Summary} />
        </Switch>
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs react-router react-router-v4 react-router-dom react-router-component

【解决方案1】：

问题在于您的 App 组件中的路由，您只有到 /reservation 的确切路由。

所以你可能想要改变它

<Route exact path="/" component={LandingPage} />
<Route exact path="/sign-in" component={SignInPage} />
<Route exact path="/pw-forget" component={PasswordForgetPage} />
<Route exact path="/account" component={AccountPage} />
<Route exact path="/reservations" component={Reservations} />
<Route path="/reservation" component={Reservation} />

关键是关闭exact 属性，以便匹配/reservation 之后的任何路径

【讨论】：

我什至找到了一个 github 项目，其结构与此完全相同，但我的仍然无法正常工作。这就是我在这里提出问题的原因
我尝试了我在沙盒中的建议，效果很好：codesandbox.io/s/epic-rubin-8hhdp 例如Summary 部分在嵌套路由上呈现 ok。此外，您的 Reservation 组件中存在语法错误，因为您缺少 `
` 的开始标记

所以，是的，我没有开始标签，因为我简化了代码以便更好地阅读。过了一会儿，我找到了问题所在，您的回答非常有帮助。感谢您的宝贵时间。