react-router-dom v6 版本使用内容详解_刻痕

未知 02-07 7285

react-router-dom v6 版本使用内容详解

1.路由组件

(1-1) v6 方式一 react-router-dom 常规 (1-2) v6 方式二 react-router-dom 使用 useRoutes

2.页面跳转

(2-1) Link 组件跳转 (2-2) useNavigate hooks跳转，代替useHistory

3.获取路由的参数

(3-1) useParams 获取动态路由的值 (3-2) useSearchParams 获取查询字符串的值 (3-3) useLocation 获取上一个页面传递进来的 state 参数 v5、v6一样介绍：

v6 较 v5版本，在常用的路由组件管理、页面跳转、页面跳转带参等功能使用，需要注意。

官网：https://reactrouter.com/docs/en/v6

安装： //自己选一个，几种方式都可以 npm方式： npm install --save react-router-dom cnpm方式： cnpm install --save react-router-dom yarn方式： yarn add react-router-dom 指定版本：使用@ yarn add react-router-dom@5.2.1

见：package.json文件内dependencies新增了react-router-dom的版本号，即安装成功重启下项目（不需要install）

1.路由组件

BrowserRouter：引用不变 Routes：替换 v5 的 Switch 组件 Route：引用不变。参数 element 替换 v5 的 component、render 组件

(1-1) 创建 src/routers/index.js

import Home from '../views/Home'; import About from '../views/About' import Err404 from '../views/Err404' const routers = [ { title: '首页', path: '/', component: Home, }, { title: '关于', path: '/inbox', component: About, }, { title: '404', path: '/inbox', component: Err404, } ]; export default routers;

(1-2) 调用

v6 方式一 react-router-dom 常规（推荐 - 可以设置title更方便）

// v6 方式一 import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import routers from './routers'; const App = () => { return ( <Router> <Routes> // 不是老版本的：Switch {routers.map((item, index) => { return ( <Route key={index} exact path={item.path} element={<item.component />} // 不是老版本的：component 或 render // onEnter、onBeforeMount、onMounted事件，会在组件初始化时执行一次，切换路由不执行 // 若修改 document.title 查看文档：https://blog.csdn.net/weixin_44461275/article/details/122843160 /> ); })} </Routes> </Router> ); }; export default App; //v5 import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import routers from './routers'; const App = () => { return ( <Router> <Switch> {routers.map((item, index) => { return ( <Route key={index} exact path={item.path} render={() => { // 推荐使用 render 不用 component document.title = item.title; return <item.component />; }} //或： //component={<item.component />} /> ); })} </Switch> </Router> ); }; export default App;

v6 方式二 react-router-dom + 使用 useRoutes

//路由json组件 import Layout from '../layout' import About from '../views/About' import Home from '../views/Home' import AboutIndex from '../views/About/Component/AboutIndex' import AboutList from '../views/About/Component/AboutList' import Error404 from '../views/Error404' const routes = [ { path: "/", element: <Layout />, children: [ { index : true, element: <Home /> }, { path: "/about", element: <About />, children: [ { index : true, element: <AboutIndex />}, { path : "/about/:id", element :<AboutList />} ] }, ] }, { path: "*", element: <Error404 />, } ] export default routes //app.js import React from 'react'; import { BrowserRouter as Router, useRoutes } from 'react-router-dom'; import routers from '../routers'; function App() { const GetRoutes = () => useRoutes(routers); //一定要是函数内 return ( <Router> <GetRoutes /> </Router> ); } export default App; 2.页面跳转

(2-1) Link 组件跳转

import React from "react"; import { Link } from "react-router-dom"; function DEMO() { return ( <Link to="/aaa">点击跳转页面</Link> ); } export default DEMO;

(2-2) useNavigate hooks跳转，代替useHistory

import React from "react"; import { useNavigate } from "react-router-dom"; function DEMO() { const navigate = useNavigate(); // 点击跳转页面 function hrefAaa() { navigate('/aaa') } // history replace模式 function hrefReplace() { navigate("/aaa", { replace: true }); } // history.go(-1) function historyBack() { navigate(-1); } // 跳转带参数 function hrefState() { navigate("/test", { state: { test: 111 }, }); } return ( <> <div onClick={hrefAaa}>点击跳转页面</div> <div onClick={hrefReplace}>history replace模式</div> <div onClick={historyBack}>返回上一个页面</div> </> ); } export default DEMO; 3.获取路由的参数 useParams 获取动态路由的值useSearchParams 获取查询字符串的值useLocation 获取上一个页面传递进来的 state 参数 v5、v6一样 import React,{ useEffect } from "react"; import { useParams, useSearchParams, useLocation } from "react-router-dom"; export default function GoodsDetail() { const params = useParams(); // 获取动态路由的值 const [searchParams, setSearchParams] = useSearchParams(); // 获取查询字符串的值 const location = useLocation(); // 获取上一个页面传递进来的 state 参数 useEffect(() => { // 一个对象，key 为动态字符串的 key console.log(params); // {id: '123'} console.log(location.state); // { test: 111 } 上一个页面带参获取非url上面的search // 输入 http://localhost:3000/goods/123?name=1111 console.log(searchParams.get("name")); // 111 }, []); const handleSetSearch = () => { // 新增-修改 setSearchParams({ keyName: 2222 }); // /aaa?keyName=2222 }; return ( <div onClick={handleSetSearch}>Page</div> ); }