React：react-router动态路由的使用及项目封装路由全过程

一、路由

1.安装

npm install --save react-router
npm install --save react-router-dom //5以上版本

2.作用

单页面刷新（SPA），切换显示视图

• 初步使用方式：src/app.jsx页面

import React, {
    Component } from 'react'
import {
   
    BrowserRouter as Router,
    Route,
} from 'react-router-dom'

import Game from './components/game/paly'
import ComponentLife from './pages/ComponentLife'

export class App extends Component {
   
    render() {
   
        return (

            <div>
                <h3> 下面是使用路由来切换显示的方式 开始</h3>
                <Router>
                    <Route path='/Game' component={
   Game} />
                    <Route path='/ComponentLife' component={
   ComponentLife} />
                </Router>
                <h3> 这里是路由切换的结束 end</h3>
            </div>
        )
    }
}

export default App

3. 参考文档

react-router-github文档
router语法学习
官方学习文档

4. 注意点

• 路由组件分为 BrowserRouter （history 模式） 和 HashRouter（哈希模式）
  • history 模式，路径没有#号，但是需要后台配置；
  • 哈希模式跳转有#号；

import {
    BrowserRouter as Router,Route,} from 'react-router-dom'
import {
    HashRouter as Router,Route,} from 'react-router-dom'

• 路径从前往后如果有重复会显示所有匹配的，但是可以加：
  exact 精准匹配; strict 完全匹配

   <Route  exact  strict path='/game' component={
   ComponentLife} />
   <Route path='/game/routerDome' component={
   RouterDome} />

• Switch只显示一个路由页面及不匹配显示404页面匹配规则

import React from 'react'
import {
   
    BrowserRouter as Router,
    Route,
    Switch,
    NavLink,
} from 'react-router-dom'

import Game from '../components/game/paly'
import NotFound from '../components/NotFound'
import ComponentLife from '../pages/ComponentLife'

const RouterIndex = () => {
   
    return (
        <div>
            <Router>
                <NavLink to='/game'>
                    <li>游戏， </li>
                </NavLink>
                <NavLink to='/componentLife'>
                    <li>生命周期，</li>
                </NavLink>
                </NavLink>
                <Switch>
                    <Route exact strict path='/game' component={
   Game} />
                    <Route exact path='/componentLife' component={
   ComponentLife} />
                    <Route exact component={
   NotFound}></Route>
                </Switch>
            </Router>
        </div>
    )
}
export default RouterIndex

• 路由重定向 Redirect：当访问路由/laRedirect时，会直接重定向到/router/mine

import React from 'react'
import {
   
    BrowserRouter as Router,
    Route,
    Switch,
    NavLink,
    Redirect
} from 'react-router-dom'

import Game from '../components/game/paly'
import NotFound from '../components/NotFound'

const RouterIndex = () => {
   
    return (
        <div>
            <Router>
                <NavLink to='/game'>