reactRouter5

1.安装路由：npm i react-router-dom
2.包裹根组件（index.js，若不在根组件包裹，路由声明和跳转的时候都要包裹）

import React from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter} from 'react-router-dom' //history模式
import App from './App'

ReactDom.render(
  
    
  ,
   document.getElementeById('root')
)

3.注册路由

import {NavLink, Switch, Route} from 'react-router-dom'
import Home from './Home'
import About from './About'

//路由链接（NavLink有高亮效果，Link没有高亮）
Home
About

//注册路由
//switch：映射第一个，匹配到一个以后就不继续匹配了，性能更好
//replace：路由跳转使用replace模式，默认push模式
//exact：精准匹配查找

  
  
   //兜底，没有匹配的重定向

4.二级路由

import {NavLink, Switch, Route} from 'react-router-dom'
import News from './News'
import Message from './Message'

//路由链接（NavLink有高亮效果，Link没有高亮）
Home
About

//注册路由

  
  
   //兜底，没有匹配的重定向

5.路由传参的三种方式

//params传参（动态路由）
test //声明式导航
this.props.history.push(`/about/news/${param1}/${param2}`) //编程式导航（push可以换成replace）
//search传参
test
this.props.history.push(`/about/news?search1=${search1}&search2=${search2}`)
//state传参
test
this.props.history.push('/about/news', {id: state1, title: state2})

//params传参，声明路由

//search传参和state传参，声明路由（正常声明即可）


//接受params参数
const params = this.props.match.params
//接受search参数（接收到的是一个 '?id=123&name=zhangsan' 字符串，需要使用quprystring库来解析，react-router-dom已经帮我们下载好，直接引入使用，qs.parse('')）
const search = this.props.location 
//接受state参数
const state = this.props.location.state

6.一般路由组件想要使用路由组件api进行跳转的时候，需要使用withRouter转成路由组件

import React from 'react'
import {withRouter} from 'react-router-dom'
class header extends React.Component{
  render() {}
}
export default withRouter(Header)

7.路由懒加载

import {NavLink, Route} from 'react-router-dom'
import React, {Component, lazy, Suspense} from 'react-router-dom'

import Loading from './Loading'
const About = lazy(() => import('./About'))
const Home= lazy(() => import('./Home'))

export default class Demo extends Component{
  render() {
    return(
      

        //路由链接（NavLink有高亮效果，Link没有高亮）
        Home
        About

        }> //请求组件的时候的时候可以加一个加载中的组件
          
          
        
      
    )
  }
}

注：

-路由的其他api：this.props.history.goBack()、this.props.history.goForward()、this.props.history.go()

-BrowserRouter与hashRouter的区别：

1.底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样：
BrowserRouter的路径中没有#，例如：localhost:3000/demo
HashRouter的路径中没有#，例如：localhost:3000/#/demo
3.刷新后对路由state参数的影响
BrowserRouter没有任何影响，因为state保存在history对象中
HashRouter刷新后会导致路由state参数丢失
4.HashRouter可以用于解决一些路径错误相关的问题。

reactRouter6与reactRouter5的区别（建议使用函数式组件）

1.Switch标签变成Routes，且必须使用
2.Route标签的component属性变成element

} />

3.路由跳转不再用withRouter，改成useNavigate

import { useNavigate } from 'react-router-dom'
function App() {
  let navigate= useNavigate ();
  navigate()
}

4.可以使用路由表来注册路由，使用useRoutes()，可以将路由表单独抽取出来

import { Navigate } from 'react-router-dom'
import SubReact from '../pages/SubReact'
import SubVue from '../pages/SubVue'
import Detail from '../pages/Detail'

let element = [
    {
        path: '/react-app',
        element: ,
        children: [
            {
                path: 'detail',
                element: ,
            }
        ]
    },
    {
        path: '/vue-app',
        element:   
    },
    {
        path: '/',
        element:   
    }
]
export default element

import logo from './logo.svg';
import './App.css';
import { Link, useRoutes } from 'react-router-dom';
import routes from './routes';

function App() {
  // 注册路由表
  let element = useRoutes(routes);
  return (
    

      父应用

      react子应用

      vue子应用

      {element}
    
  );
}

export default App;

5.使用Outlet标签来指定子路由组件显示的位置，类似vue里面的

import { Link, Outlet } from 'react-router-dom';

export default function SubReact() {
    return (
      

        react子组件
        二级路由
        
      
    )
}

6.使用useParams、useSearchParams、useLocation来接收路由参数