0

我一直在 github 上寻找我的问题的答案,但对我没有任何作用..

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

顺便说一句,我使用react v16.13.1react-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>
    );
  }
}

4

1 回答 1

2

问题出在您的 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

于 2020-04-06T14:33:15.150 回答