封装react 路由高效开发

基本使用

下载：

npm install -S react-router

使用的时候路由器router就是react的一个组件

import { Router } from 'react-router';
render(<Router/>, document.getElementById('app'));

第一步：
创建router目录 index.js

index.js ：

import React from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
//  Switch需要包括住入口  Route 入口处  Redirect重定向

const Roudes = (props) => {
    // 解刨数据
    // 组件
    let com = props.roudes.filter((item) => item.component)
    // 重定向
    let Red = props.roudes.filter((item) => item.Redirect)
    return <Switch>
        {
        //循环渲染抛离出来的数据
            com.map((item, index) => {
                return <Route
                // key就是唯一值，这个不用多做介绍
                    key={index}
                    // path 是我们的路由路径
                    path={item.path}
                    // render 的作用就是页面绑定上去  把二级路由利用在组件上利用props 发到下一层
                    render={(props) => {
                        return <item.component {...props} roudes={item.children}></item.component>
                    }}
                ></Route>// render 将数据传入下一层
            })
        }
        {
            // 设定重定向
            Red.map((item) => {
                return <Redirect to={item.Redirect} from={item.path} key={item.path}></Redirect>
            })
        }
    </Switch>
}

export default Roudes;

第二步：
routerConfig.js因为文件，写好可用的数据：

const routerConfig=[
    {
        path:"/home",
        component:Home
    },{
        path:'/cart',
        component:Cart
    },{
        path:'/my',
        component:My
    },{
        path:'/',
        Redirect:'/home'
    }
]
export default routerConfig;

第三步：
在app.js写好出口：

import React, { Component } from 'react' // 引入react
import Router from './router/index' // 引入写好的router入口
import routerConfig from './router/routerConfig'// 引入写好的数据
import { BrowserRouter, NavLink } from 'react-router-dom'// 引入 router的框架
import './App.scss'// 公用数据

export default class App extends Component {
    render() {
        return (
            <div className='App'>
            // BrowserRouter保住所有的路由
                <BrowserRouter>
                    <main>
                    // 路由出口 挂载routerConfig数据 roudes传递到下一层
                        <Router roudes={routerConfig}></Router>
                    </main>
                </BrowserRouter>
            </div>
        )
    }
}

这个是一级路由的出口，二级路由也必须有出口，在二级页码需要写出口的位置

       import Router from '../../../router/index' // 引入写好的router出口
       
        {
          // router二级出口
        }
         <Router roudes={this.props.roudes}></Router>

这样一个封装好的react-router-dom就封装完了,我们就可以使用router入口进行页面的跳转了

import { Link } from 'react-router-dom' // 路由入口
// to标题是要跳转到的位置
<Link to='/home'></Link>