React路由器默认路由不适用于嵌套结构

Question

我有以下代码：

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} />
...

当路由与提到的路由不匹配时(例如/app/awd(，我希望显示NotFound组件，但NotFound组件却在所有页面中呈现。

Answer 1

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

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

因此，为了实现这一点，您只需要在layOut.js中移动Not Foundroute。基本上是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;