React中路由的使用

React Router现在的版本是5, 之前版本的思想是传统的思想：路由应该统一在一处渲染， Router 4之后是这样的思想：一切皆组件，React Router包含了四个包，主要使用：react-router-dom

• 在src目录下的index.js中，我们写入以下代码：

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

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

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

• 接下来，在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
        }
      ]
   }
  ]

• 创建withWrapper.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>
    )
}

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

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

• 一个简单的路由跳转功能就创建好啦