React路由6总结
文章目录
目录
文章目录
前言
1.一级路由
2.重定向
4.useRoutes()
5.嵌套路由
6.
7.函数组件params参数的使用
使用useParams()
8.函数式组件search参数
useSearchParams()
9. useLocation()
10.编程式路由导航
总结
前言
这里汇总了React新路由的使用方法，个人学习记录笔记，有什么不正确请指出
1.一级路由
区别：
1.这里由之前的 component={About} 变成 element={
2.
3.
{/* 路由链接 */}
About
Home
{/* 注册路由 */}
//注意：这里由之前的component={About}变成element={替代了包裹着
}/>
}/>
2.重定向
- 作用：只要组件被渲染，就会修改路径，切换视图。
- replace属性用于控制跳转模式（push 或 replace，默认是push）。
- 示例代码：
import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {
const [sum,setSum] = useState(1)
return (
我是Home的内容
{/* 根据sum的值决定是否切换视图 */}
{sum === 1 ? sum的值为{sum}
: }
)
}
{/* 注册路由 */}
}/>
}/>
3.NavLink高亮
- 作用: 与组件类似，且可实现导航的“高亮”效果。
- 示例代码：
- 可以写成一个回调函数的形式
- 默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
// 注意: NavLink默认类名是active，下面是指定自定义的class
//自定义样式
{
console.log('home', isActive)
return isActive ? 'base one' : 'base'
}}
>login
/*
默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
*/
home 4.useRoutes()
- 作用：根据路由表，动态创建和。
- 示例代码：
//路由表配置：src/routes/index.js
import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'
export default [
{
path:'/about',
element:5.嵌套路由
- 可以在路由表中写children数组标识每个路由的子路由
- 子路由的路径可以直接写不用带上父路由，但是注意！ path:'news',路径不要加 /，即不要写成这种形式 path:'/news'，/news代表绝对路径，new代表相对路径
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import {Navigate} from 'react-router-dom'
export default [
{
path:'/about',
element:6.
- 当产生嵌套时，渲染其对应的后续子路由。
- 在父组件中渲染嵌套子路由时使用，一级路由像上面描述渲染即可。
- 示例代码：
//根据路由表生成对应的路由规则
const element = useRoutes([
{
path:'/about',
element:Home组件内容
-
News
-
Message
{/* 指定路由组件呈现的位置 */}
7.函数组件params参数的使用
-
使用useParams()
- 作用：回当前匹配路由的 params 参数，类似于5.x中的 match.params。
- 示例代码：
import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
import User from './pages/User.jsx'
function ProfilePage() {
// 获取URL中携带过来的params参数
let { id } = useParams();
}
function App() {
return (
);
}8.函数式组件search参数
-
useSearchParams()
- 作用：用于读取和修改当前位置的 URL 中的查询字符串。
- 返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。
- 不需要再路由表中对变量进行占位如：path="users/:id"
- 示例代码：
import React from 'react'
import {useSearchParams} from 'react-router-dom'
export default function Detail() {
const [search,setSearch] = useSearchParams()
const id = search.get('id')
const title = search.get('title')
const content = search.get('content')
return (
-
- 消息编号：{id}
- 消息标题：{title}
- 消息内容：{content}
)
}9. useLocation()
- 作用：获取当前 location 信息，对标5.x中的路由组件的 location 属性。
- 示例代码：
import React from 'react'
import {useLocation} from 'react-router-dom'
export default function Detail() {
const x = useLocation()
console.log('@',x)
// x就是location对象，简写例子:
/*
{
hash: "",
key: "ah9nv6sz",
pathname: "/login",
search: "?name=zs&age=18",
state: {a: 1, b: 2}
}
*/
const {state:{id,title,content}} = useLocation()
return (
- 消息编号：{id}
- 消息标题：{title}
- 消息内容：{content}
)
}10.编程式路由导航
-
useNavigate()
- 作用：返回一个函数用来实现编程式导航。
- 示例代码：
import React from 'react'
import {useNavigate} from 'react-router-dom'
export default function Demo() {
const navigate = useNavigate()
const handle = () => {
//第一种使用方式：指定具体的路径
navigate('/login', {
replace: false,
state: {a:1, b:2}
})
//第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法
navigate(-1)
}
return (
)
}总结
本文仅仅简单介绍了React路由6的使用，可以快速了解新路由实现