react创建路由

相关三个jsx index.jsx , App.jsx , router.js => router_list.js

1. router_list.js 中

import React  from 'React'
import Index from '地址'
cont routerList = [
    {
        name:'首页',
        path:'/',
        axact:true,  //是否精确匹配
        render:(){
			return <Index />
    	}
    }
]

export default routerList

2. router.js中

import React  from 'React'
import {Swich,Route}  from 'React-router-dom'
import routerList from '引入router_list.js文件'

function IndexRouter(){
    return (
        //每次只能跳转一个页面   
    	<Swich>
        	{
                //拿到每一个routerList
                routerList.map((item,index)=>{
                    return <Route 
        						key={index}
        						path={item.path} 
        						axact={item.axact} 	//是否精确匹配
        						render={item.render}/>
                })
            }
        </Swich>
    )
}

export default IndexRouter

3. app.js 中引入组件 IndexRouter

import React  from 'React'
import {BrowserRouter}  from 'React-router-dom'
import IndexRouter form '引入的IndexRouter组件路径'

function App (){
    return(
    	<BrowserRouter className="appName">
        	<IndexRouter/>
        <BrowserRouter/>
    )
}
export default App

这样就可以实现react基本的路由配置了