react v6路由跟以前的版本有较大的区别,这里就不做区别了,主要是介绍v6路由导航的使用:
步骤一:安装最新的 react-router-dom
npm 方式
npm i react-router-dim
------------------------------------------------------------
yarn 方式
yarn add react-router-dom
步骤二:目录结构
react 有入口组件 index.js 、根组件 app.js ,这里我新建一个专门管理路由的文件夹 router,在router文件夹中新建index.js。
步骤三:文件引入
3.1 在index.js入口文件代码:
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router} from "react-router-dom";
import RootApp from "./App.js"; //引入根组件
const root = ReactDOM.createRoot(document.getElementById("root")); //创建html 根元素
root.render( // 页面渲染
<Router>
<RootApp />
</Router>
);
3.2 app.js文件代码
import routes from "./router" //引入配置好的路由数组
import { useRoutes } from "react-router-dom"; //引入路由数组处理hooks
export default () => { //导出根组件
const element = useRoutes(routes) //将数组配置的路由转换成react支持的路由模式
return <div>{element}</div>; //路由渲染
};
步骤四:路由配置
代码如下,文件位置 : router/index.js
import {
Link,
Navigate,
Outlet,
useLocation,
useNavigate,
useParams,
useSearchParams,
} from "react-router-dom";
/*
注意:所有hooks的使用只能在组件内,不能在函数内,组件外部调用
*/
/*********************************** 创建组件 ********************************************** */
const A = () => {
const navigate = useNavigate(); //使用hooks进行编程式路由导航的跳转
const location = useLocation(); //通过hooks获取路由参数
//点击事件的事件处理程序,使用箭头函数的方式进行函数声明,避免this指向问题
const handleClick = () => {
location.pathname == "/A" ? navigate("/A/Aa") : navigate("/A");
};
return (
<div>
<h1> page A</h1>
<div
style={
{
width: "500px",
height: "100px",
border: "1px solid #ccc",
marginBottom: "20px",
}}
>
<h4>以下是子路由的位置:</h4>
{/* 子路由占位符 类似于vue中的 <router-view /> */}
<Outlet />
</div>
<button style={
{ marginBottom: "20px" }} onClick={handleClick}>
点击 切换A组件 的嵌套路由
</button>
<br />
{/* 通过Link组件来实现路由的跳转,Link组件在react中最终在页面会被编译为 a标签 */}
<Link to={"/C"}>点击 进行路由传参界面演示</Link>
</div>
);
};
const Aa = () => {
return <div> page Aa : 我是A的嵌套路由</div>;
};
const Ab = () => {
return <div> page Ab : 我是A嵌套路由的默认显示路由</div>;
};
const B = () => {
const navigate = useNavigate(); //使用hooks进行编程式路由导航的跳转
return (
<div>
<h1>page B</h1>
<button onClick={() => navigate("/A")}>click me to page A</button>
</div>
);
};
const C = () => {
const navigate = useNavigate();
const handleClick = () => {
/*
此处的传参分为三种方式:
1、 路由层面的id传递
2、 地址栏上的参数传递,即为 ? 后面的参数
3、 state 数据传递,类似于vue中的query传参
*/
navigate("/D/12?phone=15596652251", {
state: {
name: "Tony",
age: 23,
sex: "man",
},
});
};
return (
<div>
<h1>page C : 路由传参演示,传递参数</h1>
<button onClick={handleClick}>点击进行页面传参</button>
</div>
);
};
const D = () => {
const { id } = useParams(); //获取路由参数
const [searchParams] = useSearchParams(); //获取地址栏参数对象
const phone = searchParams.get("phone");
const location = useLocation(); //获取路由对象
console.log(location);
const state = location.state;
return (
<div>
<h1>page D : 路由传参演示,接收参数</h1>
<div style={
{ marginBottom: "20px" }}>路由接收的参数id --- {id}</div>
<div style={
{ marginBottom: "20px" }}>地址栏接收的参数: --- {phone}</div>
<div style={
{ marginBottom: "20px" }}>
state接收的参数: --- name:{state.name} --- age: {state.age} --- sex:{" "}
{state.sex}
</div>
</div>
);
};
/*********************************** 路由配置 ********************************************** */
const routes = [
{
path: "/A",
element: <A />,
children: [
//嵌套路由
{
path: "/A/Aa",
element: <Aa />,
},
{
// path: "/A/Ab",
index: true, //嵌套路由默认显示的组件
element: <Ab />,
},
],
},
{
path: "/B",
element: <B />,
},
{
path: "/C",
element: <C />,
},
{
path: "/D/:id", //配置路由,页面传递id
element: <D />,
},
{
//配置默认路由
path: "/",
element: <Navigate to="/B" />, //重定向到 /B 页面
},
];
export default routes; //导出配置好的路由数组
以上就是react router v6数组路由配置,复制即可查看使用。
以下是整个路由的演示过程: