时间戳

首页 > 解决方案 > 路由内的路由 - 嵌套路由 - react.js

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

问题描述

我一直在 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>
    );
  }
}

标签： reactjsreact-routerreact-router-v4react-router-domreact-router-component

解决方案

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

推荐阅读