React 路由

概述
安装路由
引入
路由的使用
- HashRouter
- BrowserRouter
- Routes 与 Route
- Link
- NavLink
- Navigate
- Outlet
新增 Hook
- useNavigate()
其它

概述

与 React Router 5.x 的区别：
内置组件的变化：移除 <Switch/> ，新增<Routers> 等
语法的变化：component = {Home}，element = {<Home/>} 等
新增多个hook：useParams、useNavigate、useMatch 等

安装路由

安装(@6.3.0 最新版本)
方法一

npm i react router dom

方法二

npm i react-router-dom@6.3.0 --save

引入

import {BrowserRouter,HashRouter,Routes,Route,link} from 'react-router-dom'

路由的使用

组成部分：<HashRouter>，<BrowserRouter>，<Routes/> 与 <Route>，<Link>，<NavLink>，<Navigate>，<Outlet>

HashRouter

<!-- 路由模型，HashRouter hash模型 -->
<HashRouter></HashRouter>

BrowserRouter

BrowserRouter：封装了 history 的创建，不需要再自己创建 history 对象。用于包裹整个应用

<!-- 路由模型，BrowserRouter history模型 -->
<BrowserRouter>
...
</BrowserRouter>

Routes 与 Route

Routes 与 Route：Route 是路由配置的具体实现，它置顶当路径匹配的时候渲染哪一个 UI
<Router> 要与 <Route> 一起使用，前者包裹后者
<Route index > 属性用于指定：匹配时是否为默认路由
<Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 > false）
<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

<Routes><!-- Route组件 路由规则 --><!-- Navigate 实现重定向 --><Route path = '/' element = '{<Navigate to = '/nba'/>}'></Route><Route path = '/nba' element = '{<NBA/>}'><!-- 嵌套路由 --><!-- 默认路由： 使用index 设置 '/music' 为默认路由 --><Route path = '/news' element = '{<NEWS/>}'></Route><Route index path = '/music' element = '{<MUSIC/>}'></Route></Route><!-- 404 处理 --><Route path = '*'  element = '{<NotFond/>}'></Route></Routes>

Link

Link：修改URL，且不发送网络请求（路由链接）

NavLink

NavLink：与 <Link> 组件类似，且可实现导航的 “高亮 ” 效果

Navigate

Navigate：实现重定向

 <!-- Navigate 实现重定向 -->
<Route path = '/' element = '{<Navigate to = '/nba'/>}'></Route>

Outlet

Outlet：二级路由输出

<!-- 二级路由输出 -->
<Outlet></Outlet>

完整结构

<!-- 路由模型，HashRouter hash模型 -->
<HashRouter></HashRouter>
<!-- 路由模型，BrowserRouter history模型 -->
<BrowserRouter><!-- Link 组件 a标签 --><Link to = '/nba'><Link/><!-- NavLink 组件 a标签，可设置选中效果：.active{} --><NavLink to = '/nba'><Link/><!-- Routes组件 一级路由输出 --><Routes><!-- Route组件 路由规则 --><!-- Navigate 实现重定向 --><Route path = '/' element = '{<Navigate to = '/nba'/>}'></Route><Route path = '/nba' element = '{<NBA/>}'><!-- 嵌套路由 --><!-- 默认路由： 使用index 设置 '/music' 为默认路由 --><Route path = '/news' element = '{<NEWS/>}'></Route><Route index path = '/music' element = '{<MUSIC/>}'></Route></Route><!-- 404 处理 --><Route path = '*'  element = '{<NotFond/>}'></Route></Routes>
</BrowserRouter>

嵌套路由

<!-- 嵌套路由路径必须跟上父路径 ，默认路由不需要跟上父路径 -->
<NavLink to = '/nba/news'></NavLink> | <NavLink to = '/music'></NavLink>
<!-- 二级路由输出 -->
<Outlet></Outlet>

新增 Hook

新增 Hook：useNavigate ()，useRoutes()，useParams()，useSearchParams()，useLocation()，useMatch()，useInRouterContext()，useNavigationType()，useOutlet()，useResolvedPath()

今天先介绍第一个 useNavigate()

useNavigate()

useNavigate() 导航对象：返回一个函数来实现编程式导航
引入

import {useNavigate} from 'react-router-dom'

使用

const navigate = useNavigate()  //导航对象//方式一：指定具体的路径，第一个参数：路由 path ； 第二个 (可选) 参数：替换当前路由
navigate('/home',{replace:true})   //导航到 /home//方式二：传入数值进行前进或后退，类似于5.x中的 history.go()方法
navigate(-1)   //返回上一页

其它

path = "/main/:id"
//:id 动态id

React 路由 V6相关推荐

React路由V6技术文档
React Router 6 快速上手 1.概述 React Router 以三个不同的包发布到 npm 上,它们分别为: react-router: 路由的核心库,提供了很多的:组件.钩子. rea ...
React Router v6 的路由切换实现方式
首先需要先引入路由库,并配置好路由规则. 在React Router v6中,可以使用<Routes>和<Route>组件来定义路由规则. 例如: # 使用<Routes ...
在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...
[译] React 路由和 React 组件的爱恨情仇
原文地址:The Love-Hate Relationship between React Router and React Components 原文作者:Kasra 译文出自:掘金翻译计划本文永 ...
vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...
react路由守卫+重定向_React + Apollo：如何在重新查询后进行重定向
react路由守卫+重定向 by Jun Hyuk Kim 金俊赫 React + Apollo:如何在重新查询后进行重定向 (React + Apollo: How to Redirect afte ...
[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决？
[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决? componentWillReceiveProps 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
16、React系列之 React 路由
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain 地址:http://www.jianshu.com/p/b55cf53e633a 本文出自 Ti ...
RN和React路由详解及对比
前言在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...

React 路由 V6