实现react路由的配置化管理

react实现路由配置化

1、为什么要搞这个配置化

我们知道在vue中我们直接可以把路由做成路由表的形式来实现路由的简介配置，但是在react中，我们没有现成的东西直接支持我们做配置化的路由，但是我们要是每次在需要路由的地方都去调用react-router-dom中的Route就会显得很繁琐，并且代码维护起来会很累，于是我们想把它做成类似与vue的配置化路由。

2、实现步骤

1、首先我们封装一下将路由表信息变为组件渲染的组件

建一个RouterComp.jsx的文件

import React from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'

function RouterComp(props) {
  let {
    routes
  } = props;
  //这里是将所有是重定向的项找出来
  let redir = routes && routes.length > 0 && routes.filter((v, i) => {
    return v.redirect 
  })
  //将重定向的组件渲染出来
  let renderRedir = redir.length > 0 && redir.map((v, i) => {
    return <Redirect from={v.path} to={v.redirect} key={i} />
  })
  return (
    <Switch>
      {
      //这里将所有的Route按照它的path和对应的组件渲染
        routes && routes.length > 0 && routes.map((v, i) => {
          if (v.component) {
            return <Route key={i} path={v.path} component={(props) => {
            	//这里我们将children也就是下一级路由传下去方便在下一级路由使用
              return <v.component routes={v.children} {...props} />
            }} />
          }
          //这里我们将重定向的组件加到里面
        }).concat(renderRedir)
      }
    </Switch>  
  )
}

export default RouterComp

2、现在我们来配置一下路由表把

再建一个router_config.js的文件放我们的路由表

import Default from 'pages/Default/index'
import Login from 'pages/home'
import Home from 'pages/home/index'
import Community from 'pages/community/index'
import Column from 'pages/column/'
import ImportNews from 'pages/importNews/'
import Mine from 'pages/mine'
import loginPage from 'pages/login/'
import SearchPage from 'pages/searchPage/'
const routes = [
    {
      path:"/login",
      component:Login
    },
    {
      path:"/search",
      component:SearchPage
    },
    {
        path:"/default",
        component:Default,
        children:[
          {
            path:"/default/home",
            component:Home
          },
          {
            path:"/default/community",
            component:Community
          },
          {
            path:"/default/column",
            component:Column
          },
          {
            path:"/default/importNews",
            component:ImportNews
          },
          {
            path:"/default/mine",
            component:Mine
          },
          {
            path:"/default/loginPage",
            component:loginPage
          },
        ]
      
    },
    {
      path: '/',
      redirect: '/default/home'
    }
]

export default routes;

这里相对简单一点我们只需要按自己的需要进行配置就可以了

3、最后一步就是将我们的两个文件引入到App.js中进行调用

import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import RouterComp from './router/RouterComp.jsx';
import routerList from './router/router_config.js';

class App extends Component {
	render() {
		return (
			<div className="app">
          		<Router>
		            <RouterComp routes = {routerList}>
		            </RouterComp>
          		</Router>
			</div>
		);
	}
}

export default App;

这样我们就能在react项目中进行配置化的路由了

4、注意事项

这里我们需要注意的是在我们的二级路由中必须再次引入

//这样我们就可以将children的路由拿到并且渲染了这样不管多少级的路由我们都可以拿到渲染
<RouterComp routes = {this.props.routes} />

3、谢谢观看

才疏学浅，如果有些的不对或者更好的建议，欢迎评论支持。