Route inside Route - 嵌套路由 - react.js

Question

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

我的问题是，当我在 Reservation 组件中使用 Link 时，它会更改路径，但不会更改可见组件并且页面变为空。 Summary 组件现在应该只渲染带有一些文本的 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>
    );
  }
}

Answer 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

之后的任何路径

Route inside Route - 嵌套路由 - react.js

Route inside Route - nesting routes - react.js

reactjs

react-router

react-router-component

react-router-v4

react-router-dom