Question

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

我的问题是，当我在“保留”组件中使用“链接”时，它会更改路径，但不会更改，从而更改可见组件，并使页面变空。摘要组件现在应该只用一些文本呈现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之后的任何路径匹配

路线内的路线-嵌套路线-react.js

1 个答案: