技术标签： react.js 前端 javascript
router-router-dom6 就是当前react路由的最新版本 在2021年11月发布 已经是路由推荐版本
将 Switch 升级为 Routes
路由匹配组件参数 由 component 改为 element
相对路径识别（子路由不需要补全父路由的path，react会自动补全）
用 useNavigate 替代 useHistory
废弃 Redirect 标签，使用 Navigate 标签实现路由重定向
优化路由嵌套，添加 outlet 标签（路由出口，路由组件的显示。相当于vue-router里的<router-view>)
使用 index 标识默认路由
添加 useResolvedPath hooks
添加 useSearchParams 读取和设置url参数
link 标签跳转的path 将支持 . 和 .. 这种语法（类比于 terminal 中的 cd .. 返回上级菜单 ）
path 通配符将只支持 * 和 ：(以前的？等将不再支持)
添加 useOutletContext 用于 路由之间共享状态
安装
npm install --save react-router-dom1.新建views文件夹 容纳路由页面 新建router文件夹容纳路由配置
./src/router/index.ts
import React from 'react'
// 1.引用路由配置
import {Route} from "react-router-dom"
// 2.引用路由页面
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
export default function index() {
return (
<>
{/* 3.设置路由规则 */}
<Route path="/home" element={<Home/>}></Route>
<Route path="/phone" element={<Phone/>}></Route>
<Route path="/shop" element={<Shop/>}></Route>
</>
)
}
2.设置路由配置放到到入口文件中
./src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// 1.引用路由配置文件
import App from './router';
import {BrowserRouter} from "react-router-dom"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);3.运行之后发现如下错误
Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. 错误是说Route组件不能直接渲染 必须用一个Routes组件进行包裹使用 注意在V6版本中 Routes就是V5版本的Switch组件
对 ./src/router/index.ts进行修改，用<Routes>标签包裹<Route>
import React from 'react'
// 引用Routes
import {Route,Routes} from "react-router-dom"
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
export default function index() {
return (
<>
{/* 使用唯一渲染 */}
<Routes>
<Route path="/home" element={<Home/>}></Route>
<Route path="/phone" element={<Phone/>}></Route>
<Route path="/shop" element={<Shop/>}></Route>
</Routes>
</>
)
}
import React from 'react'
import {Route,Routes,Navigate} from "react-router-dom"
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
export default function index() {
return (
<>
<Routes>
<Route path="/home" element={<Home/>}></Route>
<Route path="/phone" element={<Phone/>}></Route>
<Route path="/shop" element={<Shop/>}></Route>
{/* 设置路由重定向 */}
<Route path="/" element={<Navigate to="/home"/>}></Route>
</Routes>
</>
)
}
import React from 'react'
import {Route,Routes,Navigate} from "react-router-dom"
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
import No from "../views/No.jsx"
export default function index() {
return (
<>
<Routes>
<Route path="/home" element={<Home/>}></Route>
<Route path="/phone" element={<Phone/>}></Route>
<Route path="/shop" element={<Shop/>}></Route>
<Route path="/" element={<Navigate to="/home"/>}></Route>
{/* 404 */}
<Route path="*" element={<No/>}></Route>
</Routes>
</>
)
}
1.新建二级路由页面 与规则的配置
./src/router/index.ts
import React from 'react'
import {Route,Routes,Navigate} from "react-router-dom"
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
import No from "../views/No.jsx"
import Era from "../views/er/Era.jsx"
import Erc from "../views/er/Erc.jsx"
export default function index() {
return (
<>
<Routes>
<Route path="/home" element={<Home/>}>
{/* 在一级路由规则中直接嵌套 */}
{/*
<Route path="/home/era" element={<Era/>}></Route>
<Route path="/home/erc" element={<Erc/>}></Route>
*/}
{/* 也可以直接使用下面的相对路径写法 两个写法是相同的 */}
<Route path="era" element={<Era/>}></Route>
<Route path="erc" element={<Erc/>}></Route>
</Route>
<Route path="/phone" element={<Phone/>}></Route>
<Route path="/shop" element={<Shop/>}></Route>
<Route path="/" element={<Navigate to="/home"/>}></Route>
<Route path="*" element={<No/>}></Route>
</Routes>
</>
)
}
2.设置路由出口 Outlet
./src/app.tsx
import React from 'react'
import {Outlet} from "react-router-dom"
export default function Home() {
return (
<div>
home
<Outlet></Outlet>
</div>
)
}
Link与NavLink方式进行跳转
<Link to="/home">home</Link>
<Link to="/phone">phone</Link>
Link to="/shop">shop</Link>
或者
<NavLink to="/home">home</NavLink>
<NavLink to="/phone">phone</NavLink>
<NavLink to="/shop">shop</NavLink>修改NavLink默认类名--》NavLink默认选中类名为active 如果想修改 还是使用className来修改里面传入回调函数
import React from 'react'
import {NavLink} from "react-router-dom"
export default function Demolink() {
return (
<div>
<NavLink to="/home" className={({isActive})=>isActive?'xiaoming':''}>home</NavLink>
<NavLink to="/phone" className={({isActive})=>isActive?'xiaoming':''}>phone</NavLink>
<NavLink to="/shop" className={({isActive})=>isActive?'xiaoming':''}>shop</NavLink>
</div>
)
}
使用 useNavigate()来完成
import React from 'react'
// 1.引用
import {useNavigate} from "react-router-dom"
export default function Demolink() {
// 2.调用
let navigate=useNavigate()
let fun=()=>{
// 3.使用
navigate("/home")
}
return (
<div>
<button onClick={fun}>点我去home</button>
</div>
)
}
1.配置接受参数
<Route path="/phone/:id" element={<Phone/>}></Route>2.传参
import React from 'react'
import { useNavigate } from "react-router-dom";
export default function Shop() {
let navigate = useNavigate();
let fun=()=>{
// 编程式
navigate('/phone/我是参数')
}
return (
<div>
shop
<button onClick={fun}>点我使用params方式发送数据给phone</button>
//声明式
<Link to='/phone/我是参数'>点我使用params方式发送数据给phone</Link>
</div>
)
}
3.接参 用 useParams
import React from 'react'
import { useEffect } from 'react';
// 通过useParams接受路由传值
import { useParams } from "react-router-dom";
export default function Phone() {
const params = useParams();
// js接收
useEffect(()=>{
console.log(params.id)
},[])
return (
<div>
{/* 页面接收 */}
phone--{params.id}
</div>
)
}
特点
参数会在url后面拼接传递 localhost:xxxx/phone/我是参数 并且刷新不丢失
1.传参
import React from 'react'
import { useNavigate,Link} from "react-router-dom";
export default function Shop() {
let navigate = useNavigate();
let fun=()=>{
// 发送
navigate('/phone?id=999&key=val&key=val')
}
return (
<div>
shop
<button onClick={fun}>点我使用params方式发送数据给phone</button>
{/* 声明式发送方式 */}
<Link to={
{ pathname:`/phone?id=999` }}>Child</Link>
</div>
)
}
2.接参
import React from 'react'
import { useEffect } from 'react';
// 通过useSearchParams接受路由传值
import { useSearchParams } from "react-router-dom";
export default function Phone() {
// 返回数组长度为2的数据 第一个为传递过来的数据 第二个是修改传递过来的数据
const [searchParams, setSearchParams] = useSearchParams();
// js接收
useEffect(()=>{
console.log(searchParams.get("id"))
},[])
return (
<div>
{/* 页面接收 */}
phone--{searchParams.get('id')}
</div>
)
}
修改接收的路由参数---在有的项目里面 点击顺便看看类似的功能
import React from 'react'
import { useEffect } from 'react';
// 通过useSearchParams接受路由传值
import { useSearchParams } from "react-router-dom";
export default function Phone() {
// 返回数组长度为2的数据 第一个为传递过来的数据 第二个是修改传递过来的数据
const [searchParams, setSearchParams] = useSearchParams();
useEffect(()=>{
console.log(searchParams.get("id"))
},[])
return (
<div>
phone--{searchParams.get('id')}
{/* // 同时页面内也可以用第二个参数方法来改变路由 */}
<button onClick={()=>{setSearchParams({"id":2})}}>点我修改接收的路由参数</button>
</div>
)
}特点
参数会在url后面拼接传递 localhost:xxxx/phone?id=2 并且刷新不丢失
传参：
<Link to="/Detail" state={
{ id: "q01001" }}>state:01001</Link>接参：
import React from 'react';
import {useLocation} from "react-router-dom";
export default function Detail() {
const location = useLocation();
console.log("location.state.id",location.state.id);
return (
<div>
<p>location.state.id：{location.state.id}</p>
</div>
)
}1.修改引用方式 lazy()按需引用
// 1.修改引用方式 使用lazy方法引用
// import Home from "../views/Home.jsx"
const Home=React.lazy(()=> import ("../views/Home.jsx"))2.修改调用方式 Suspense 懒加载加载进来的，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。提示等待信息（有可能加载速度很快看不见等待提示）
{/* <Route path="/home" element={<Home/>}> */}
{/* 2修改使用方式 */}
<Route path="/home" element={<React.Suspense fallback={<>请稍等。。</>}> <Home/></React.Suspense>}>但是如果一个个都这样写太麻烦了 我们可以封装一下
let lazyload=(path)=>{
let Com=React.lazy(()=> import (`../views/${path}`))
return (
<React.Suspense fallback={<>请等待·····</>}>
<Com/>
</React.Suspense>
)
} 使用
<Route path="/home" element={lazyload("Home")}>Hook====useRoutes 让我们可以完成类似于vue一样的配置式路由
./routes/index.js
import { Navigate } from "react-router-dom";
import Goods from "../views/Goods/Goods.jsx";
import Home from "../views/Home.jsx";
import User from "../views/User.jsx";
import Detail from "../views/Goods/Detail.jsx";
import Comment from "../views/Goods/Comment.jsx";
const routes = [
{
path: "/",
element: <Navigate to="/Home" />,
},
{
path: "/Home",
element: <Home></Home>,
},
{
path: "/User",
element: <User></User>,
},
{
path: "/Goods",
element: <Goods></Goods>,
children: [
{
path: "Detail",
element: <Detail></Detail>,
},
{
path: "Comment",
element: <Comment></Comment>
}
],
},
];
export default routes;
使用 useRoutes
import './App.css';
import {Link, useRoutes } from "react-router-dom";
import routes from './routes';
function App() {
return(
<>
<span>
<Link to="/Home"> 首页</Link>
</span> |
<span>
<Link to="/User"> 用户</Link>
</span> |
<span>
<Link to="/Goods"> 商品</Link>
</span> |
<hr/>
{ useRoutes(routes)}
</>
)
}
export default App;import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
使用路由出口 Outlet
./views/Goods.js
import React from "react";
import { Outlet, Link } from "react-router-dom";
export default function Goods() {
return (
<>
<div>商品页面</div>
<span>
<Link to="/Goods/Detail"> 详情</Link>
</span>
|
<span>
<Link to="/Goods/Comment"> 评论</Link>
</span>
|
<hr></hr>
<Outlet></Outlet>
</>
);
}1）、在上一步的路由配置文件中使用 React.Lazy()函数，并把组件用<React.Suspense>包裹。
import React from "react";
import {Navigate} from "react-router-dom";
let lazyload=(path)=>{
let Com=React.lazy(()=>{return import (`../views/${path}`)})
return (
<React.Suspense fallback={<>请等待·····</>}>
<Com/>
</React.Suspense>
)
}
export default [
{
path:"/",
element:<Navigate to="/home"/>
},
{
path:"/home",
element:lazyload("Home/Home"),
children:[
{
path:"Son01",
element:lazyload("Home/Son01")
},
{
path:"Son02",
element:lazyload("Home/Son02")
}
]
},
{
path:"/Shop",
element:lazyload("Shop")
},
{
path:"/Phone2",
element:lazyload("Phone")
}
]文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势，分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括：FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大
文章浏览阅读1.1k次，点赞2次，收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的：估计模块间的delay，确保写的代码的timing 综合能给到多少HZ，以满足需求！_基4布斯算法代码
文章浏览阅读3.3k次，点赞3次，收藏5次。OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版
文章浏览阅读2.2k次。USACO自1992年举办，到目前为止已经举办了27届，目的是为了帮助美国信息学国家队选拔IOI的队员，目前逐渐发展为全球热门的线上赛事，成为美国大学申请条件下，含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学，越来越多的学生进入了康奈尔，麻省理工，普林斯顿，哈佛和耶鲁等大学，这些同学的共同点是他们都参加了美国计算机科学竞赛（USACO)，并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学，高三学生也可以参加12月的第_usaco可以多次提交吗
文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程
文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0
文章浏览阅读2.8k次，点赞3次，收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画（无顶点位移），整个mesh由4个顶点构成。实现了水面效果（左图），不动代码稍微修改下参数和贴图可以实现岩浆效果（右图）。有要思路是1，uv按时间去做正弦波移动2，在1的基础上加个凹凸图混合uv3，在1、2的基础上加个水流方向4，加上对雾效的支持，如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader
文章浏览阅读5k次。广义线性模型是线性模型的扩展，它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为：其中g(μY)是条件均值的函数（称为连接函数）。另外，你可放松Y为正态分布的假设，改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后，便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下，线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是，有时候我们要进行非正态因变量的分析，例如：（1）类别型.._广义线性回归模型
文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△） 一套A+的网_垃圾分类网页设计目标怎么写
文章浏览阅读614次，点赞7次，收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录
文章浏览阅读1.5k次。本文为转载，原博客地址：http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出，BRIEF是对已检测到的特征点进行描述，它是一种二进制编码的描述子，摈弃了利用区域灰度..._breif description calculation 特征点
文章浏览阅读4.1k次，点赞21次，收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文