React v6（仅支持函数组件，不支持类组件）与v5版本路由使用详情和区别（详细版）

1.路由安装(默认安装最新版本6.15.0)

npm i react-router-dom

2.路由模式

有常用两种路由模式可选：HashRouter 和 BrowserRouter。

①HashRouter：URL中采用的是hash(#)部分去创建路由。

②BrowserRouter：URL采用真实的URL资源，无#。

3.常用路由组件和hooks

注意：

v5版本路由是模糊匹配，需加关键字exact和Switch实现精准匹配。

v6版本路由算法改变，默认就是精确匹配（匹配完整路径），如果想匹配某一部分，在路径后加"/*"

例如：

<Route path="/home/:id" element={<Home />}/>
则匹配
path = "/home/123"
path="/home/abc"

<Route path="/citylist/*" element={<CityList />}/>
则匹配
path="/citylist"
path="/citylist/123/abc"

在v6中Route能够找到最优路径，并不需要像v5讲究先后顺序。

4.<Link/><NavLink/>类似于a标签

老版本v5中NavLink可以设置激活状态时的样式，他有一个activeClassName或activeStyle。

新版本v6中NavLink可以移除了老版本activeClassName或activeStyle，他有一个箭头函数，接收isActive,<Link/>可以跳转但是不能使用以下方式激活样式

import React from 'react'
import "./App.css"
import {NavLink}from "react-router-dom"function App() {return (<div className="App">
{/* 自动会传入isActive,要解构出来,判断是否选中，如果选中追加样式*/}
<NavLink className={({isActive})=>isActive?"active":""} to="/citylist">去城市列表</NavLink>
<NavLink className={({isActive})=>isActive?"active":""} to="/home">去首页</NavLink>//style书写方式
<NavLink style={({isActive})=>{
return {
color:isActive?"red":"black"
}
} to="/home">去首页</NavLink></div>);
}export default App;

效果如下：

5.新老版本重定向

老版本：<Redirect to="/login" />

新版本：使用Navigate 进行重定向<Route path="/" element={<Navigate to="/home" />/>,相当于push，会有历史记录，如果<Route path="/" replace element={<Navigate to="/home" />/>使用replace,无历史记录。

6.路由出口与占位(<Outlet/>)，不做过多赘述。

7.useRoutes声明式的路由

①.index.js文件引入并使用

import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';import App from './App';
// 1.引入BrowserRouter路由模式
import {BrowserRouter  } from 'react-router-dom'const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* 2.使用 */}<BrowserRouter ><App /></BrowserRouter ></React.StrictMode>
);

②router->index.js文件

const OutRoutes=()=>{const routes=useRoutes([{path:"/home",element:<Home/>,// home组件内使用Outlet添加出口,以显示子组件内容,// 注意:子组件不需加绝对路径"/",否则会报错,使用相对路径children:[{path:"detail",element:<Detail/>}]  },{path:"/citylist",element:<CityList/>},
//* 404页面，匹配不符合路径{path:"*",element:<NotFound/>}])return routes
}export default OutRoutes

③App.js文件

import React, { Suspense } from 'react'
import IndexRouter from "./router"
function App() {return (<div className="App">{/* 使用路由懒加载,渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。 */}{/* 注意：<IndexRouter></IndexRouter>要用标签的形式,因为他是组件 */}<Suspense><IndexRouter></IndexRouter></Suspense></div>);
}export default App;

8.编程式的路由

老版本：

类组件：this.props.history.push("/home")

函数组件：useHistory()

新版本：

useNavigate()

import React from 'react'
import { Link,useNavigate } from 'react-router-dom'export default function CityList() {const naviate = useNavigate();const jump=()=>{naviate("/home/detail");//push的方式// naviate("/home/detail",{replace:true})replace方式}return (<div>城市列表<Link to="/home">去home页面</Link><button onClick={()=>jump()}>跳转</button> </div>)
}

9.路由跳转，参数携带以及获取路由参数的三种方式

// push跳转的三种携带参数方式
// 1.携带params参数
Navigate(`/home/c1/${id}/${title}`)  ==>     useParams()
//2.携带search参数
Navigate(`/home/c1?id=${id}&title=${title}`) ==> useSearchParams()
//3.携带state参数
Navigate("/home/c1",{state:{id,title}}) ==>  useLocation()//replace跳转的三种携带参数方式
// 1.携带params参数
Navigate(`/home/c1/${id}/${title}`,{replace:true})
// 2.携带search参数
Navigate(`/home/c1?id=${id}&title=${title}`,{replace:true})
//3.携带state参数
Navigate("/home/c1",{state:{id,title},replace:true})

注意：新版本类组件如果想获取以上三种获取参数的方式，要么使用函数组件，要么使用高阶组件。