为什么不根据路由渲染组件？

Question

我正在使用 React 路由器，我创建了一个路径为 /account 的路由，它呈现了帐户组件。该组件呈现导航栏。在该导航栏下方，我希望它根据 URL 是什么来呈现不同的组件。如果 URL 是 account/edit 我想显示编辑帐户组件，如果 URL 是 account/myorders 我希望它显示我的订单组件，最后如果 URL 是 account/favorites 我希望它在我的导航栏下方显示收藏夹组件，

编辑帐户
我的订单
收藏夹

现在我遇到了 url 发生变化但导航栏下方没有组件呈现的问题。如果我在 /account 路线上使用精确路径，我会在路线 /edit、/myorders 和 [=19= 上得到“path does not exist” ].如果我不在 /account 路线上使用 exact，所有路线上都会显示相同的视图。只有当我获得要渲染的组件时，我才会将 /edit 上的路线更改为 /.

function Routes() {
  return (
    <Switch>
      <Route path="/" component={Home} exact />

      <Route path="/account" component={Account} />

      <Route render={() => <Route component={Error} />} />
    </Switch>
  );
}

这些是我已经导入到我的 App.js 组件中的可用路由

const Account = () => {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route path="/edit" component={EditAccount} exact />
        <Route path="/myorders" component={MyOrders} />
        <Route path="/favorites" component={Favorites} />
      </Switch>
    </Router>
  );
};

这些是我的 Account.js 组件中不起作用的路由

Answer 1

问题在于您使用 <Router></Router> 将 routes 包装在 Acouunt 组件中。

尝试删除它，像这样:-

const Account = () => {
  return (
      <NavBar />
      <Switch>
        <Route path="/edit" component={EditAccount} exact />
        <Route path="/myorders" component={MyOrders} />
        <Route path="/favorites" component={Favorites} />
      </Switch>
  );
};

了解更多信息。

Answer 2

我的解决方案是使用这样的嵌套路由。

const Account = () => {
  let match = useRouteMatch();

  return (
    <Router>
      <NavBar />
      <h1>Account</h1>
      <Switch>
        <Route path={`${match.path}/edit`} component={EditAccount} exact />
        <Route path={`${match.path}/myorders`} component={MyOrders} />
        <Route path={`${match.path}/favorites`} component={Favorites} />
      </Switch>
    </Router>
  );
};

为什么不根据路由渲染组件？

Why aren't components being rendered according to route?

javascript

reactjs

react-router

react-router-redux

react-router-dom