reactjs - 处理自定义 404 页面

【问题标题】：reactjs - Handling custom 404 pagereactjs - 处理自定义 404 页面
【发布时间】：2019-08-08 15:35:44
【问题描述】：

我正在尝试创建一个可以捕获所有无效 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 并且不会显示管理布局吗？

提前谢谢你。

【问题讨论】：

stackoverflow.com/questions/42929472/… 可能重复

标签： reactjs react-router react-router-v4 react-admin

【解决方案1】：

对于 react-router

如果你想显示错误页面而不改变路径

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

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

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

对于 react-router 4

保持路径

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

更改网址。

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

无论您在交换机中放置路由标签的任何位置，都必须放置重定向标签。

【讨论】：