首页 > 其他分享> 文章详细

React-router-dom v6

2022-01-06 22:02:45 阅读：1494 来源： 互联网

标签：URL Demo React 嵌套参数 v6 组件 router 路由

1.BrowserRouter

要放在最顶层，即所有组件的最外面;可以定义别名

2.Routes

包括相对路由和链接、自动路由排名、嵌套路由和布局等功能

3.路由跳转

"/"开头为绝对路由，否则为相对路由

4.Route

负责渲染React组件的UI

1）path属性

始终与应用程序当前的URL匹配

2）element属性

当遇到当前URL时，会告诉Route组件渲染哪个React组件

Demo中的情况：

5.Link

添加一个导航栏相当于HTML中的a标签只能在Router内部使用

Demo中的情况：

6.编程式跳转(useNavigate)

使用useNavigate钩子函数生成navigate对象，可以通过js代码完成路由跳转

Demo中的情况：

const navigate = useNavigate();

<button onClick={() => navigate('/')}>点击跳转回首页</button>

7. 路由传参的三种方式

1)动态路由参数(读取URL参数) 关键字：Params

在Route组件中的path属性中定义路径参数；在组件内通过useParams hook访问路径参数

Demo中的情况：

路由中：

detail文件中：

const params = useParams();

<h3>此时是用户{params.id}</h3>

user文件中：

通常用在组件呈现时获取数据：

function Invoice() {

let { invoiceId } = useParams();

let invoice = useFakeFetch(`/api/invoices/${invoiceId}`);

return invoice ? (

<div>

<h1>{invoice.customerName}</h1>

</div>

) : (

);

}

2）search参数

查询参数不需要在路由中定义

使用useSearchParams hook来访问查询参数，用法与useState类似，会返回当前对象和更改他的方法

更改searchParams时，必须传入所有查询参数，否则会覆盖已有参数

//路由链接(携带参数)：

<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>

//接收参数方法：

import { useSearchParams } from "react-router-dom";

const [searchParams, setSearchParams] = useSearchParams();

console.log( searchParams.get(“age”)); // 20

3）state参数

//通过Link的state属性传递参数

<Link

className="nav"

to={`/b/child2`}

state={{ id: 999, name: "i love merlin" }} //要传递的参数写在此处

Child2

</Link>

//接收参数：

import { useLocation } from "react-router-dom";

const { state } = useLocation();

//state参数 => {id: 999, name: "i love merlin"}

//刷新也可以保留参数

8.嵌套路由

通过嵌套的书写Route组件实现对嵌套路由的定义

在父组件中使用Outlet来显示匹配到的子组件，目的是作为子路由的出口

Demo中的情况：

父组件：<Outlet />

路由：嵌套路由的形式

</Route>

9.默认路由

在嵌套路由中，如果URL仅匹配了父级URL，则Outlet中会显示带有index属性的路由

Demo中的情况：

10.全匹配路由

path值取“*”时，可以匹配任何(非空)路径，但他的优先级是最低的，一般用来设置404界面

Demo中的情况：

11.多组路由

通常一个应用中只有一个Routes组件，但是根据实际需求也可以定义多个路由出口(比如侧边栏和主页面都要随URL变化)

</Routes>

</SideBar>

<Main>

</Routes>

</Main>

</Router>

12.重定向(Navigate)

当前在a，想重定向到b，可以通过Navigate组件进行重定向到其他路径

import { Navigate } from 'react-router-dom';

function A(){

return (

)

}

13.后裔路由(Descendant)

在父路由路径的末尾放置一个 *，可以避免当 URL 长于父路由的路径时，父路由与 URL 不匹配，影响后代路由的显示

官网示例：

function App() {

return (

</Routes>

);

}

function Dashboard() {

return (

<div>

<p>Look, more routes!</p>

</Routes>

</div>

);

}

Demo地址：https://stackblitz.com/edit/react-xlsspr?file=src%2FPages%2FUser.js

标签：URL,Demo,React,嵌套,参数,v6,组件,router,路由
来源： https://www.cnblogs.com/guohaodi/p/15773068.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React-router-dom v6