封装路由
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) => {
return < item. component { ... props} child= { item. children} / >
} } / >
} ) . concat ( redirectArr)
}
< / Switch>
}
export default RouterView;
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