持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

路由重定向

路由重定向主要是解决路由都没有匹配上的时候，使用重定向跳转到指定路由，但是React Route 6做了太多破坏性更新，直接废弃了旧的Redirect方法。

前面的例子可以看出来，我自己写了一个根路由/重定向指向了Home这个路由组件。

现在来使用路由重定向把访问网站根目录重定向到Home这个路由。

具体代码

React Route6.0之前的版本

Redirect组件一般卸载所有路由注册的最下方。匹配不到就使用这个重定向。需要从react-router-dom引入这个组件 App.js:

...
import { NavLink, Route, Routes,Link, Redirect } from 'react-router-dom'
...

function App() {
	return (
		<div>
			<div >
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/home" >
					home
				</NavLink>&nbsp;
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/about" >
					About
				</NavLink>
			</div>
			<Routes>
				<Route path="/home" element={<Home />} />
				<Route path="/about" element={<About />} />
				<Redirect to={<Home />} />
			</Routes>
		</div>
	);
}

6.0之后版本：

App.js

...
import { NavLink, Route, Routes,Link, Navigate } from 'react-router-dom'
...


function App() {
	return (
		<div>
			<div >
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/home" >
					home
				</NavLink>&nbsp;
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/about" >
					About
				</NavLink>
			</div>
			<Routes>
	
				<Route path="/home" element={<Home />} />
				<Route path="/about" element={<About />} />
                                <Route path="/" element={<Navigate to="/home"  />} />
			</Routes>
		</div>
	);
}

使用了Navigate这个组件替换了之前旧版本的Redirect，这个组件就是用来做路由跳转的。
效果：

访问网站的根目录没有匹配到路由，直接重定向到了Home这个路由。

嵌套路由

这是一个非常常见的路由用法，很多成熟的后台前端框架都是使用了嵌套路由。今天就只了解其中原理，手写一个简单例子。

以著名的Ant Design为例：

使用了三个层级的路由，这种成熟的框架路由同时会配置一些权限控制，我们放在后面再学习。现在模仿一下AntDesign做一个三个层级路由： App.js：

import Artical from './pages/List/Artical'
import Project from './pages/List/Project'
import Home from './pages/Home'
import Form from './pages/Form'
import { NavLink, Route, Routes, Navigate } from 'react-router-dom'
import './App.css'

function App() {
	return (
		<div>
			<div >
				<NavLink className="list-group-item" to="/home" >
					家
				</NavLink>&nbsp;
				<NavLink className="list-group-item" to="/list/" >
					列表
				</NavLink>&nbsp;
				<NavLink className="list-group-item" to="/list/artical" >
					文章列表
				</NavLink>&nbsp;
				<NavLink className="list-group-item" to="/list/project" >
					项目列表
				</NavLink>&nbsp;
				<NavLink className="list-group-item" to="/form" >
					表格
				</NavLink>
			</div>
			<Routes>

				<Route path="/home" element={<Home />} />
				<Route path="/list/artical" element={<Artical />} />
				<Route path="/list/project" element={<Project />} />
				<Route path="/list/*" element={<Navigate to="/list/artical" />} />
				<Route path="/form" element={<Form />} />
				<Route path="/" element={<Navigate to="/home" />} />
			</Routes>
		</div>
	);
}

export default App;

看下其他代码的层级关系，就不看具体代码了：

具体效果：

这里没有做路由按钮的的展开特效，只做了路由的跳转展示，路由重定向，了解到路由定义，路由注册一一对应的原则。主要了解有这个嵌套路由的东西，然后想一下路由之间传值也是同样地传，等遇到了再去仔细学习。