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})

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