react router 配置404页面

react router 配置404页面

使用Vue相关的技术栈2年左右了,在路由管理上一直用的比较得心应手,现在的项目使用react开发,路由自然也就切换到了react router,所用版本为react router 4

在Vue router配置中,我们可以很简单的配置出404页面
使用通配符 * 号匹配所有路由,并将此配置放在数组的最末端,当前面的路由都匹配不上时,就会匹配到 * 号,然后我们使用redirect 配置将路由重定向到404component
此配置方法不管是对于单级路由还是嵌套路由都适用,只要匹配不到,最终都可以通过 * 来redirect

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/404',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      children: [
        {
          path: 'page1',
          name: 'page1',
          component: page1
        },
        {
          path: 'page2',
          name: 'page2',
          component: page2
        },
      ]
    },
    {
      path: '*',
      redirect: '/404'
    }
  ]
})

那么 react router 4 有什么不同的地方呢?

首先是配置子路由的位置不同

react router 4配置嵌套路由是在所在组件里面进行配置

// Parent component
	<Switch>
      <Route path="/Page" component={Page} />
      <Route path="/Sub" component={Childs} />
    </Switch>
// Child component
const Childs = ({ match }) => (
  <div>
    <Switch>
      <Route path={`/Sub/page1`} component={Page1} />
      <Route path={`/Sub/page2`} component={Page2} />
    </Switch>
  </div>
);

在父组件里定义好子组件
这样就可以通过 '/Sub/page1’访问到该路由页面了

其次,react router 4还在路由匹配上有些不同,R4没有通配符* ,取而代之的是在路由最后可以添加

<Switch>
  <Route path="/Page" component={Page} />
  <Route path="/Sub" component={Childs} />
  <Route component={NoMatch} />  // 匹配未找到的路由
</Switch>

参考链接:react router官方文档

这时候,我们添加404页面在根组件,it works!

但是,我们的需求往往不是这么简单,通常情况下,我们希望在所有路由情况下他都可以校验路由是否不存在


problem:

在嵌套路由下,我们发现:访问 /Sub/page3’’ 仍然可以看到不完整的路由页面,虽然没有匹配到page3,但是router匹配到了/Sub,这时候问题来了,子路由匹配不到404页面啊。

我查看了当前比较火的react前端解决方案 <react-admin>和<ant-design-pro>,发现他们都没有全局404页面的解决方案。

查了很久文档和他人的文章,最终找到一个解决方案,借鉴出处:一个神奇的网站

  1. 既然R4是在父组件内部配置路由的,那么内部也要添加404匹配路由
// 在子组件中添加404路由
 <Switch>
  <Route path={`/Sub/page1`} component={Page1} />
  <Route path={`/Sub/page2`} component={Page2} />
  <Route component={NoMatch} />
</Switch>
// NoMatch(404)组件

class NoMatch extends React.Component {
  componentDidMount() {
  }
  render() {
    return (
      <div className="404">
        404
      </div>
    );
  }
}
  1. 直接匹配404依然会渲染父组件,所以我们需要重定向
// RedirectAs404
const RedirectAs404 = ({ location }) => <Redirect to='/404' />
// 通过Redirect将当前路由重定向到
 <Switch>
  <Route path={`/Sub/page1`} component={Page1} />
  <Route path={`/Sub/page2`} component={Page2} />
  <Route component={RedirectAs404} />
</Switch>
  1. 发现直接redirect到404不太友好,页面路径也变成了404
    在这里插入图片描述
  2. 在根组件添加一个state,来修改总路由配置
// RedirectAs404
const RedirectAs404 = ({ location }) => <Redirect to='{Object.assign({}, location, { state: { is404: true } })}' />
// App.js 这里指根组件
<Route render={({ location }) => (
  location.state && location.state.is404
    ? <NoMatch />
    : <Switch>
      	<Route path="/Page" component={Page} />
		<Route path="/Sub" component={Childs} />
        <Route component={RedirectAs404} />
    </Switch>
)} />

这样,不管是第几级的组件,当只要匹配到RedirectAs404组件,都会重定向到404页面,也就做到了全局404显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值