为啥不根据路由渲染组件？

Posted 2023-02-21

【中文标题】为啥不根据路由渲染组件？

【英文标题】：Why aren't components being rendered according to route?为什么不根据路由渲染组件？

【发布时间】：2021-08-08 21:54:19

【问题描述】：

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

编辑帐户 我的订单 收藏夹

现在我遇到了这个问题，即 url 发生了变化，但在我的导航栏下方没有呈现任何组件。如果我在 /account 路由上使用确切路径，我会在路由 /edit、/myorders 和 /favorites 上得到“路径不存在”。如果我不在/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 组件中不起作用的路由

【参考方案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>
  );
;

Check this 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>
  );
;