路由内路由-嵌套路由- react.js

Question

我已经在寻找关于github的问题的答案了，但是没有什么对我有用。

我的问题是，当我在预订组件中使用Link时，它会更改路径，但不会更改可见组件，页面就会变为空。现在，摘要组件应该只使用一些文本来呈现h1。我要做些什么才能让这些部件起作用？

顺便说一句，我使用了react v16.13.1和react router 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

问题在于应用程序组件中的路由，您只有一条通往/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后面的任何路径。