React-Router6路由相关一（路由的基本使用、重定向、NavLink·、路由表、嵌套路由）（七）

系列文章目录

第一章：React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
第二章：React基础知识（组件实例三大核心属性state、props、refs）（二）
第三章：React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
第四章：React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
第五章：react-router5路由相关一（路由相关概念、基本使用、NavLink与NavLink的封装、Switch的使用、严格匹配、路由重定向、路由组件与一般组件的区别）（五）
第六章：react-router5路由相关二（嵌套路由、路由传参、replace、编程式路由导航、withRouter的使用、BrowserRouter与HashRouter的区别）（六）
第七章：React-Router6路由相关一（路由的基本使用、重定向、NavLink·、路由表、嵌套路由）（七）
第八章：React-Router6路由相关二（路由传参、编程式路由导航、路由相关hooks）（八）
第九章：React相关扩展一（setState、lazyLoad、Hooks相关）（九）

---

---

与React Router 5.x 版本相比，改变了什么？

1. 内置组件的变化：移除 ，新增 等。

2. 语法的变化：component={About} 变为 element={}等。

3. 新增多个hook：useParams、useNavigate、useMatch等。

4. 官方明确推荐函数式组件了！！！

   …

一、路由的基本使用

1.1

1. 说明： 用于包裹整个应用。

2. 示例代码：

   import React from "react";
   import ReactDOM from "react-dom";
   import { BrowserRouter } from "react-router-dom";
   
   ReactDOM.render(
     <BrowserRouter>
       {/* 整体结构（通常为App组件） */}
     </BrowserRouter>,root
   );
   

1.2

1. 说明： 作用与一样，但修改的是地址栏的hash值。
2. 备注： 6.x版本中、 的用法与 5.x 相同。

1.3 与

1. v6版本中移出了先前的，引入了新的替代者：。

2. 和 要配合使用，且必须要用包裹。

3. 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

4. 属性用于指定：匹配时是否区分大小写（默认为 false）。

5. 当URL发生变化时， 都会查看其所有子 元素以找到最佳匹配并呈现组件 。

6. 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。

7. 示例代码：

   <Routes>
       /*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/
       <Route path="/login" element={<Login />}></Route>
   
   		/*用于定义嵌套路由，home是一级路由，对应的路径/home*/
       <Route path="home" element={<Home />}>
          /*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/
         <Route path="test1" element={<Test/>}></Route>
         <Route path="test2" element={<Test2/>}></Route>
   		</Route>
   	
   		//Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
       <Route path="users">
          <Route path="xxx" element={<Demo />} />
       </Route>
   </Routes>
   

代码片段：

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

App.jsx

import React from 'react'
import {NavLink,Routes,Route} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
	return (
		<div>
			<div className="row">
				<div className="col-xs-offset-2 col-xs-8">
					<div className="page-header"><h2>React Router Demo</h2></div>
				</div>
			</div>
			<div className="row">
				<div className="col-xs-2 col-xs-offset-2">
					<div className="list-group">
						{/* 路由链接 */}
						<NavLink className="list-group-item" to="/about">About</NavLink>
						<NavLink className="list-group-item" to="/home">Home</NavLink>
					</div>
				</div>
				<div className="col-xs-6">
					<div className="panel">
						<div className="panel-body">
							{/* 注册路由 */}
							<Routes>
								<Route path="/about" element={<About/>}/>
								<Route path="/home" element={<Home/>}/>
							</Routes>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

About.jsx

import React from 'react'

export default function About() {
	return (
		<h3>我是About的内容</h3>
	)
}

Home.jsx

import React from 'react'

export default function Home() {
	return (
		<h3>我是Home的内容</h3>
	)
}

运行结果：

二、重定向

1. 作用：只要组件被渲染，就会修改路径，切换视图。

2. replace属性用于控制跳转模式（push 或 replace，默认是push）。

3. 示例代码：

代码片段（为节省空间，该案例App、About、index的代码和上述第一个案例一致，不在重复描述）：
App.jsx

import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
	return (
		<div>
			<div className="row">
				<div className="col-xs-offset-2 col-xs-8">
					<div className="page-header"><h2>React Router Demo</h2></div>
				</div>
			</div>
			<div className="row">
				<div className="col-xs-2 col-xs-offset-2">
					<div className="list-group">
						{/* 路由链接 */}
						<NavLink className="list-group-item" to="/about">About</NavLink>
						<NavLink className="list-group-item" to="/home">Home</NavLink>
					</div>
				</div>
				<div className="col-xs-6">
					<div className="panel">
						<div className="panel-body">
							{/* 注册路由 */}
							<Routes>
								<Route path="/ABOUT" element={<About/>}/>
								<Route path="/home" element={<Home/>}/>
								<Route path="/" element={<Navigate to="/about"/>}/>
							</Routes>
						</div>
					</div>
				</div>
			</div>
		</div>
	)

Home.jsx

import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'

export default function Home() {
	const [sum,setSum] = useState(1)
	return (
		<div>
			<h3>我是Home的内容</h3>
			{sum === 2 ? <Navigate to="/about" replace={true}/> : <h4>当前sum的值是：{sum}</h4>}
			<button onClick={()=>setSum(2)}>点我将sum变为2</button>
		</div>
	)
}

运行结果：

三、Link和NavLink

3.1

1. 作用: 修改URL，且不发送网络请求（路由链接）。

2. 注意: 外侧需要用或包裹。

3. 示例代码：

   import { Link } from "react-router-dom";
   
   function Test() {
     return (
       <div>
       	<Link to="/路径">按钮</Link>
       </div>
     );
   }
   

3.2

1. 作用: 与组件类似，且可实现导航的“高亮”效果。

2. 示例代码：

   // 注意: NavLink默认类名是active，下面是指定自定义的class
   
   //自定义样式
   <NavLink
       to="login"
       className={({ isActive }) => {
           console.log('home', isActive)
           return isActive ? 'base one' : 'base'
       }}
   >login</NavLink>
   
   /*
   	默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
   	当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
   */
   <NavLink to="home" end >home</NavLink>
   

案例片段：（为节省空间，该案例Home、About、index的代码和上述第一个案例一致，不在重复描述）：

App.jsx

import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
	function computedClassName({isActive}){
		return isActive ? 'list-group-item atguigu' : 'list-group-item'
	}
	return (
		<div>
			<div className="row">
				<div className="col-xs-offset-2 col-xs-8">
					<div className="page-header"><h2>React Router Demo</h2></div>
				</div>
			</div>
			<div className="row">
				<div className="col-xs-2 col-xs-offset-2">
					<div className="list-group">
						{/* 路由链接 */}
						<NavLink className={computedClassName} to="/about">About</NavLink>
						<NavLink className={computedClassName} to="/home">Home</NavLink>
					</div>
				</div>
				<div className="col-xs-6">
					<div className="panel">
						<div className="panel-body">
							{/* 注册路由 */}
							<Routes>
								<Route path="/ABOUT" element={<About/>}/>
								<Route path="/home" element={<Home/>}/>
								<Route path="/" element={<Navigate to="/about"/>}/>
							</Routes>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

运行结果：

四、路由表useRoutes()

1. 作用： 根据路由表，动态创建和。
2. 注意： 路由表的使用方式的必须是Hooks的方式，即组件必须是函数组件，类组件无法实现。
3. 使用路由表文件有如下三步骤：
   • 导入路由表文件
   • 注册路由表
   • 使用路由表

案例片段：（为节省空间，该案例Home、About、index的代码和上述第一个案例一致，不在重复描述）：

App.jsx

import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
//导入路由表文件
import routes from './routes'

export default function App() {
	//根据路由表生成对应的路由规则(注册路由表)
	const element = useRoutes(routes)
	return (
		<div>
			<div className="row">
				<div className="col-xs-offset-2 col-xs-8">
					<div className="page-header"><h2>React Router Demo</h2></div>
				</div>
			</div>
			<div className="row">
				<div className="col-xs-2 col-xs-offset-2">
					<div className="list-group">
						{/* 路由链接 */}
						<NavLink className="list-group-item" to="/about">About</NavLink>
						<NavLink className="list-group-item" to="/home">Home</NavLink>
					</div>
				</div>
				<div className="col-xs-6">
					<div className="panel">
						<div className="panel-body">
							{/* 使用路由表 */}
							{element}
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

routes.js

import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'

export default [
	{
		path:'/about',
		element:<About/>
	},
	{
		path:'/home',
		element:<Home/>
	},
	{
		path:'/',
		element:<Navigate to="/about"/>
	}
]

运行结果：

五、嵌套路由

当产生嵌套时，渲染其对应的后续子路由。

案例片段：（为节省空间，该案例App、About、index的代码和上述路由表案例一致，不在重复描述）：
Home.jsx

import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

export default function Home() {
	return (
		<div>
			<h2>Home组件内容</h2>
			<div>
				<ul className="nav nav-tabs">
					<li>
						<NavLink className="list-group-item" to="news">News</NavLink>
					</li>
					<li>
						<NavLink className="list-group-item" to="message">Message</NavLink>
					</li>
				</ul>
				{/* 指定路由组件呈现的位置 */}
				<Outlet />
			</div>
		</div>
	)
}

Message.jsx

import React from 'react'

export default function Message() {
	return (
		<div>
			<ul>
				<li>
					<a href="/message1">message001</a>&nbsp;&nbsp;
				</li>
				<li>
					<a href="/message2">message002</a>&nbsp;&nbsp;
				</li>
				<li>
					<a href="/message/3">message003</a>&nbsp;&nbsp;
				</li>
			</ul>
		</div>
	)
}

News.jsx

import React from 'react'

export default function News() {
	return (
		<ul>
			<li>news001</li>
			<li>news002</li>
			<li>news003</li>
		</ul>
	)
}

routes.js

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:<About/>
	},
	{
		path:'/home',
		element:<Home/>,
		children:[
			{
				path:'news',
				element:<News/>
			},
			{
				path:'message',
				element:<Message/>
			}
		]
	},
	{
		path:'/',
		element:<Navigate to="/about"/>
	}
]

运行结果：