react 路由 v6 数组配置路由
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( // 页面渲染
);3.2 app.js文件代码
import routes from "./router" //引入配置好的路由数组
import { useRoutes } from "react-router-dom"; //引入路由数组处理hooks
export default () => { //导出根组件
const element = useRoutes(routes) //将数组配置的路由转换成react支持的路由模式
return {element}; //路由渲染
};
步骤四：路由配置
代码如下，文件位置 : 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 (
page A
以下是子路由的位置：
{/* 子路由占位符 类似于vue中的
{/* 通过Link组件来实现路由的跳转,Link组件在react中最终在页面会被编译为 a标签 */}
点击 进行路由传参界面演示
);
};
const Aa = () => {
return page Aa : 我是A的嵌套路由;
};
const Ab = () => {
return page Ab : 我是A嵌套路由的默认显示路由;
};
const B = () => {
const navigate = useNavigate(); //使用hooks进行编程式路由导航的跳转
return (
page B
);
};
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 (
page C : 路由传参演示,传递参数
);
};
const D = () => {
const { id } = useParams(); //获取路由参数
const [searchParams] = useSearchParams(); //获取地址栏参数对象
const phone = searchParams.get("phone");
const location = useLocation(); //获取路由对象
console.log(location);
const state = location.state;
return (
page D : 路由传参演示,接收参数
路由接收的参数id --- {id}
地址栏接收的参数: --- {phone}
state接收的参数: --- name:{state.name} --- age: {state.age} --- sex:{" "}
{state.sex}
);
};
/*********************************** 路由配置 ********************************************** */
const routes = [
{
path: "/A",
element: ,
children: [
//嵌套路由
{
path: "/A/Aa",
element: 以上就是react router v6数组路由配置，复制即可查看使用。
以下是整个路由的演示过程：
