reactjs - 处理自定义 404 页面

Question

我正在尝试创建一个可以捕获所有无效 URL 的路由，然后向没有管理布局的用户显示我的自定义 404 页面。 我的问题是，我的 404 页面始终显示管理布局（即使用户未登录）。 我的routes.js 中有这些路由：

export default [
 <Switch>
   <Route exact path="/password-reset" component={ResetPassword} noLayout />,
   <Route exact path="*" component={NotFound} noLayout/>
 </Switch>
];

我已将此位添加到App.js 中的 Admin 组件中：

const App = () => (

<Admin
    catchAll=         {NotFound}
    customRoute=      {routes}
>
</Admin>
);

知道如何处理 404 页面以便捕获所有无效的 URL 并且不显示管理布局吗？

先感谢您。

Answer 1

对于反应路由器 < 4.0

如果要显示错误页面而不更改路径

<Route path='*' exact={true} component={errorcomponent} />

如果要显示错误页面并更改路径

<Route path='/error' component={errorcomponent} />
 // use redirect to  change the Url
<Redirect from='*' to='/error' />

对于反应路由器 4

保持路径

<Switch>
    <Route exact path="/" component={component} />
    <Route component={errorcomponent} />
 </Switch>

更改网址。

 <Switch>
    <Route path="/comp" component={component} />
   <Redirect to="/error" />
 </Switch>

重定向标签必须放在你在交换机中放置路由标签的任何地方。