react-router-config的使用

随着项目的增大，路由会越来越多，这就需要我们进行集中管理，我们可以自己写脚本，也可以使用react-router-config这个第三方库，这个库简化了配置React-Router，并且对路由实现集中管理，还能实现嵌套路由，下面我们看一下如何使用react-router-config。

react-router-config的使用包含如下三个步骤：

  1. 按照规则配置静态路由文件，示例代码如下：

在routes/index.jsx中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//eslint-disable-next-line
import React from 'react'

import Layout from '@/layouts'

import ServerError from '@/pages/500'
import NotFound from '@/pages/404'

const routes = [
  {
    component: Layout,
    routes: [
      {
        path: '/',
        component: React.lazy(() => import('@/pages/blog')),
        exact: true,
        key: 'home',
      },
      {
        path: '/about',
        component: React.lazy(() => import('@/pages/about')),
        key: 'about',
      },
      {
        path: '/blog/:id',
        component: React.lazy(() => import('@/pages/blog/show')),
        key: 'blog-show',
      },
      {
        path: '/tag',
        component: React.lazy(() => import('@/pages/tag')),
        key: 'tag',
      },
      {
        path: '/category',
        component: React.lazy(() => import('@/pages/category')),
        key: 'category',
      },
      {
        path: '/archive',
        component: React.lazy(() => import('@/pages/archive')),
        key: 'archive',
      },
      {
        path: '/error',
        component: ServerError,
        key: 'server-error',
      },
      {
        path: '*',
        component: NotFound,
        key: 'not-found',
      },
    ],
  },
]

export default routes

仔细阅读代码，我们发现配置文件本质就是一个数组，数组的每一项都有如下属性：path、component、routes、render，（注意：render和component只能使用一个）

这是最简单的配置。

如果你的路由存在嵌套路由，比方说/admin下面有/admin/control，那么就必须在有嵌套的路由下追加routes属性，routes也是一个数组，数组的每一项也是一个对象，对象具有path属性和component属性。有时根据需求需要跳转，可以配置render属性，render为一个函数，函数内返回一个重定向组件。

  1. 从react-router-config中导入renderRoutes方法，将上面配置的数据传入此方法。

  2. 将第二步的计算结果放到Router组件内部，代码如下：

1
2
3
4
5
6
7
8
9
import { renderRoutes } from 'react-router-config'

import routes from './routes/'

function App() {
  return renderRoutes(routes)
}

export default App
  1. 这里需要注意，如果使用了嵌套路由，就需要这一步，如果没有嵌套路由，则忽略这一步。那就是在使用了嵌套路由的组件中设置占位符，本质是按照react-router的规则配置路由，我们在Layout组件中使用了嵌套路由Layout的代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Suspense } from 'react'
import { Spin } from 'antd'
import { renderRoutes } from 'react-router-config'

import Header from '@/components/header'
import Footer from '@/components/footer'

const Loading = () => {
  return (
    <div style={{ width: '100%', textAlign: 'center' }}>
      <Spin />
    </div>
  )
}

const BlogLayout = props => {
  return (
    <>
      <Header />
      <div className="blogs-body">
        <Suspense fallback={<Loading />}>{renderRoutes(props.route.routes)}</Suspense>
      </div>
      <Footer />
    </>
  )
}

export default BlogLayout

以上便是react-router-config的使用步骤，希望对你有所帮助。