React 封装路由

封装路由

• routerConfig.js

	import Movie from "../views/movie";
	import Cinema from "../views/cinema";
	import Mine from "../views/mine";
	import City from "../views/city";
	import Search from "../views/search";
	import Hot from "../views/hot";
	import News from "../views/news";
	import Login from "../views/login";
	import Detail from "../views/detail"
	import React, { Component } from 'react';
	import Loadable from "react-loadable"  //按需加载
	    //按需加载
		 const Loading = () => {
		     return <div>loading.....</div>
		 }
		 const Cinema = Loadable({
		     loader: () => import("../views/cinema"),
		     loading: Loading,
		 })
	const routes = [
		    {
		        path: "/",
		        redirect: "/movie"
		    },
		    {
		        path: "/movie",
		        component: Movie,
		        children: [
		            {
		                path: "/movie/hot",
		                component: Hot,
		            },
		            {
		                path: "/movie/news",
		                component: News,
		            },
		            {
		                path: "/movie",
		                redirect: "/movie/hot"
		            }
		        ]
		    },
		    {
		        path: "/cinema",
		        component: Cinema,
		    },
		    {
		        path: "/mine",
		        component: Mine,
		    },
		    {
		        path: "/city",
		        component: City,
		    },
		    {
		        path: "/search",
		        component: Search,
		    },
		    {
		        path: "/login",
		        component: Login,
		    },
		    {
		        path: "/detail/:id",
		        component: Detail,
		
		    },
		]
	export default routes;

• routerviews
  在这里将原先的路由注释掉,然后在下面循环出来，然后筛选出不是重定向的将他遍历一遍，将其传参,其次在找出所由都是路由的，循环遍历.

import React from "react";
import { Redirect, Route, Switch } from "react-router-dom";
function RouterView(props) {
    let { routes } = props; //这里就是传参过来
    let routerArr = routes.filter(item => !item.redirect); //非重定向的数据过滤出来
    let redirectArr = router && routes.filter(item => item.redirect).map((item, index) => <Redirect key={index} from={item.path} to={item.redirect} />)
    return <Switch>
        {
            routerArr && routerArr.map((item, index) => {
                return <Route key={index} path={item.path} render={(props) => {
                   /*注意这里传props里面才能进行下面的history使用,child是传的二级路由的*/
                    return <item.component {...props} child={item.children} />
                }} />
            }).concat(redirectArr)  //将其合并
        }
    </Switch>

}
export default RouterView;

• index.js

import React, { Component } from 'react'
import {BrowserRouter,Redirect,Route,Switch} from "react-router-dom"
import RouterView from "./routerView"
import routes from "./routerConfig"
function RootRouter(){
    return <BrowserRouter>
         <RouterView routes={routes}></RouterView>
    </BrowserRouter>
}

export default RootRouter;

• 这个是在组件页面中调用进行二级路由跳转的。

    <RouterView routes={routes}/>
    剩下的是二级路由传参  let {child}=this.props; 然后在调用二级页面的时候传参过去
     <RouterView routes={child} /> 

新路由方法

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

class RouterView extends Component {

    static defaultProps = {
        router: {}  //路由相关配置
    }

    state = {}

    get renderRoute () {
        const {router} = this.props
        const routes = router instanceof Array ? router : router.routes
        const redirects = routes.filter(item => item.redirect)

        return [
            <Switch key="route">
                {routes.map((item, index) => {
                    return (
                        <Route path={item.path} key={index} render={(props) => {
                            return <item.component {...props} children={item.children} meta={item.meta}/>
                        }} />
                    )
                })}
            </Switch>,
            <Switch key="redirect">
                {redirects.map((item, index) => {
                    return (
                        <Redirect exact to={item.redirect} key={index} from={item.path}/>
                    )
                })}
            </Switch>
        ]
    }
    render () {
        const {router} = this.props
        if (router instanceof Array) {
            return this.renderRoute
        } else {
            if (router.mode === 'history') {
                return (
                    <BrowserRouter>
                        {this.renderRoute}
                    </BrowserRouter>
                )
            } else {
                return (
                    <HashRouter>
                        {this.renderRoute}
                    </HashRouter>
                )
            }
        }
    }
}

export default RouterView