时间戳

首页 > 解决方案 > 反应路由器默认路由不适用于嵌套结构

reactjs - 反应路由器默认路由不适用于嵌套结构

问题描述

我有以下代码：

layOut.js

...
<Switch>
  <Route path="/app" component={AppLayout} />
</Switch>
...

appLayout.js

...
<Route path="/app/user/change-password" exact component={ChangePassword} />
<Can role="ADMIN">
  <Route path="/app/user/billing" exact component={Billing} />
</Can>
<Route component={NotFound} />
...

我期望NotFound当路由与提到的路由不匹配时显示组件（例如/app/awd），但相反，NotFound组件正在所有页面中呈现。

标签： reactjsreact-router

解决方案

我假设Can组件输入appLayout.js是您protected自己创建的组件。

根据我的经验，拥有多个专用parent path（例如：/app或/app2）并认为其中每一个都path需要自己的Not Found路径实际上是行不通的，它总是会呈现Not Found组件/页面。

因此，为了完成这项工作，您只需将您Not Found route的layOut.js. 基本上Switch发生在哪里。就一次。

  • layOut.js:-
export default function Layout() {
  return (
    <Router>
      <Switch>
        <AppLayout />
        <Route path="*" component={() => "Not Found"} />
      </Switch>
    </Router>
  );
}
  • appLayout.js:-
const AppLayout = () => {
  return (
    <>
      <Route
        exact
        path="/app/user/change-password"
        component={ChangePassword}
      />
      <Can role="ADMIN">
        <Route exact path="/app/user/billing" component={Billing} />
      </Can>
    </>
  );
};

export default AppLayout;

推荐阅读