配置路由

1.首先安装路由

npm install react-router-dom@5

2.pachage.json如下：

3.创建几个页面，如 Home.js Car.js My.js

4.在src下创建router文件夹，里面新建index.js文件
（1）将创建的页面引进来 （2）引入路由的方法 HashRouter,Route,Redirect,Switch

index.js代码如下

import React, { Component } from 'react'
//引入路由方法
import {HashRouter,Route,Switch} from 'react-router-dom'
//引入页面
import Home from './router/views/Home'
import Shop from './router/views/Shop'
import Car from './router/views/Car'
import My from './router/views/My'
import Login from './router/views/Login'
import Detail from './router/views/Detail'
import './css/index.css'
import Nofound from './router/views/Nofound'
export default class App extends Component {
  render() {
    return (
      <div className='app'>
        <HashRouter>
            <Switch>
              <Route path='/login' component={Login}></Route>
              <Route path='/home' component={Home}></Route>
              <Route path='/shop' component={Shop}></Route>
              <Route path='/car' component={Car}></Route>
              <Route path='/my' component={My}></Route>
            </Switch>    
        </HashRouter>   
      </div>
    )
  }
}

5.路由导航用navLink方法进行页面跳转，给标签内添加activeClassName属性

  <ul className='footer'> 
            <li>
              <NavLink to='/home' activeClassName='on'>首页</NavLink>
            </li>
            <li>
              <NavLink to='/shop' activeClassName='on'>分类</NavLink>
            </li>
            <li>
              <NavLink to='/car' activeClassName='on'>购物车</NavLink>
            </li>
            <li>
              <NavLink to='/my' activeClassName='on'>我的</NavLink>
            </li>
          </ul> 

6.给路由设置重定向和404页面
重定向：是进入某个页面时，默认进入哪个路由
404：用户输入错误时，进入404页面
代码如下：

import React, { Component } from 'react'
//引入路由方法
import {HashRouter,Route,Switch} from 'react-router-dom'
//引入页面
import Home from './router/views/Home'
import Shop from './router/views/Shop'
import Car from './router/views/Car'
import My from './router/views/My'
import Login from './router/views/Login'
import Detail from './router/views/Detail'
import './css/index.css'
import Nofound from './router/views/Nofound'
export default class App extends Component {
  render() {
    return (
      <div className='app'>
        <HashRouter>
            <Switch>
              <Route path='/login' component={Login}></Route>
              <Route path='/home' component={Home}></Route>
              <Route path='/shop' component={Shop}></Route>
              <Route path='/car' component={Car}></Route>
              <Route path='/my' component={My}></Route>
              {/*设置重定向*/}
              <Redirect from='/' to='/home'></Redirect>
              {/*设置404页面*/}
              <Route component={Nofound}></Route>
            </Switch>    
        </HashRouter>   
      </div>
    )
  }
}

7.在App.js文件引入router下的index.js文件并使用

import React, { Component } from 'react'
import Router from './router/index'
export default class App extends Component {
  render() {
    return (
      <div className='app'>
         <Router></Router>
      </div>
    )
  }
}

二级路由配置

1.重新创建页面，如：HomeChild01.js HomeChild02.js
2.在需要的页面设置二级路由引入新建的页面，在引入路由方法
代码如下：

import React, { Component } from 'react'
//引入路由方法
import {Switch,Route,Redirect,NavLink} from 'react-router-dom'
//引入页面
import HomeChild01 from './films/HomeChild01'
import HomeChild02 from './films/HomeChild02'
import '../../css/index.css'
export default class Home extends Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div>
         <ul className='title'>
            <li>
                <NavLink to='/home/homeChild01' activeClassName='active'>正在上映</NavLink>
            </li>
            <li>
                <NavLink to='/home/homeChild02' activeClassName='active'>即将上映</NavLink>
            </li>
          </ul>
          <Switch>
              <Route path='/home/homeChild01' component={HomeChild01}></Route>
              <Route path='/home/homeChild02' component={HomeChild02}></Route>
              <Redirect to='/home/homeChild01' exact></Redirect>
          </Switch>
      </div>
    )
  }
}