react 路由

[wolichuang]

react-router-dom

1. 在src目录下的index.js中

   import App from './router/App'
   import { BrowserRouter as Router } from 'react-router-dom'
   ReactDOM.render(
   <Router>
     <App />
   </Router>, document.getElementById('root'))

2. 创建一个目录router，在此目录下创建App.jsx文件：

   import React, { Component } from 'react'
   //路由表
   import routes from './routes'
   //路由配置
   import demofrom './demo'
   export default class App extends Component {
   render() {
     return (
       <div>
         {
           demo(routes)
         }
       </div>
     )
   }
   }

3. 在router目录下创建routes.js文件，用来配置我们的路由表：

   //引入组件
   import Home from './views/Home'
   import Kind from './views/Kind'
   import Cart from './views/Cart'
   import User from './views/User'
   import UserList from './views/UserList'
   import AdminList from  './views/Adminlist'
   // eslint-disable-next-line import/no-anonymous-default-export
   export default [
   {
     path: '/home',
     title: '首页',
     component: Home
   },
   {
     path: '/kind',
     title: '分类管理',
     component: Kind
   },
   {
     path: '/cart',
     title: '购物车管理',
     component: Cart
   },
   {
     path:'/user',
     title:'用户管理',
     component:User,
     children: [
       {
         path: '/user/list',
         title: '用户列表',
         component: UserList
       },
       {
         path: '/user/admin',
         title: '管理员列表',
         component: AdminList
       }
     ]
   }
   ]

4. 创建demo.js文件，用来配置路由：

   import React from 'react'
   import { Route, Switch, NavLink } from 'react-router-dom'
   // eslint-disable-next-line import/no-anonymous-default-export
   export default (routes) =>{
   return(
       <div>
       <ul>
           {
           routes.map((route)=>(
               <li key={route.path}>
               //标签跳转
               <NavLink to = { route.path } >{ route.title }</NavLink>
               </li>
           ))
           }
       </ul>
       <Switch>
           {
           routes.map((route)=>(
               //内容显示
               <Route key={route.path} path={route.path} render = {()=>(
                   <route.component routes = { route.children }/>
               )}/> 
           ))
           }
       </Switch>
       </div>
   )
   }

5. 我们需要创建一个views目录，里面写入我们需要的组件，与根组件App类似，以User.js为例，格式如下：

   import React from 'react'
   import demo from './../demo'
   const User = (props) =>{
   return(
   <div>
     { demo(props.routes)}
   </div>
   )
   }
   export default User