router路由配置

​

路由

1.路由概念：随着浏览器地址发生改变，展示给用户不同的视图页面

2.模式：Hash模式 histo模式

3.使用场景：多页面的切换

4.插件：react-router-dom

5.react-router-dom路由的内置组件

NavLink 导航组件 自带active高亮 to={路由路径}

Link 导航组件 to= {路由路径}

Route 路由视图组件 path={路由路径} component={路由视图组件} router={函数}

Redirect 路由重定向组件 to={路由路径}

Switch 避免路由重复匹配组件

BrowserRouter 路由根组件

路由插件流程

1.下载 npm install react-router-dom -D

2.在src目录下新建router/config.js router/RouterView.js

config.js

import 路由视图组件 from '路径'

const routers=[

	{
	        path:'重定向路径',
	         component：路由视图组件,
	},
	{
	        path:'一级路由路径'，
	        component：路由视图组件,
	        children:[
	                {
	                        path:'二级路由路径'，
	                        component:路由视图组件
	                }
	        ]
	}
]

//抛出
exprot default routers

//RouterView.js

import React from 'react';//引入react组件

import {Route,Switch,Redirect} from 'react-router-dom'//引入react-router-dom组件

export default function RouterView(props) {

    let coms=props.routes.filter(item=>item.component)//筛选出路由视图组件

    let red=props.routes.filter(item=>item.redirect)//筛选路由重定向组件

    return (
        <Switch className="rout">
         {
             coms.map((item,index) =>{

                 return <Route key={index} path={item.path} render={()=>{
                     if(item.children){
                         return <item.component routes={item.children} />//递归调用
                     }
                     else{
                         return <item.component/>
                     }
                 }}></Route>
             })
         } ,
         {
             red.map((item,index) =>{
                 return <Redirect to={item.redirect} key={index}/>
             })
         }  
        </Switch>
    );
}

一级路由

import React, { Component } from 'react';
// 引入路由组件
import {BrowserRouter} from 'react-router-dom'
// 引入加载路由视图的函数组件
import RouterView from './route/RouterView'
// 引入路由配置表
import config from './route/config'

export default class App extends Component {
  render() {
    return (
      <div>
         <BrowserRouter>
            {/* 展示一级路由页面 */}
            <RouterView routes={config}/>
         </BrowserRouter>
      </div>
    );
  }
}

二级路由

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import RouterView from '../route/RouterView'
 {/* 二级视图组件 */}
 <RouterView routes={this.props.routes} />