💻 React Route5 路由🏠专栏：React
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁
文章目录
React Route5 路由
一切皆组件，默认是history模式
安装
yarn add react-router-dom@5
起步
(1) 从react-router-dom中引入BrowserRouter
import { BrowserRouter } from 'react-router-dom'
如果想要使用路由，那么所有和路由相关的内容都要放在BrowserRouter的里面
<BrowserRouter>
<h2>Hello Router</h2>
</BrowserRouter>
注：如果整个项目都要使用路由，可以将BrowserRouter组件写到index.js项目入口文件中，并包裹组件。
(2) 从react-router-dom中引入Link
import { Link } from 'react-router-dom'
<BrowserRouter>
<ul>
<li>
<Link to="home">首页</Link>
</li>
<li>
<Link to="about">关于页</Link>
</li>
</ul>
</BrowserRouter>
Link组件相当于Vue中的router-link
Link的to属性用于改变url
(3) 从react-router-dom中引入Route
import { Route } from 'react-router-dom'
Route组件是用来切换内容，相当于Vue中的router-view
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
Route组件中的所有属性：
path：指定 URL 路径匹配规则的字符串，可包含变量和正则表达式。exact：当为true时，只有 URL 路径与path属性完全匹配时才渲染当前组件。strict：当为true时，要求 URL 路径结尾必须为斜线/。sensitive：当为true时，表示 URL 匹配时，将大小写视为敏感。component：指定路由匹配成功后要渲染的 React 组件。render：一个返回 React 组件的函数，可以根据需要动态渲染组件。children：一个返回 React 元素的函数，无论 URL 是否匹配，都将被调用并渲染为子元素。
注：
react的路由是：包容性路由（无论匹没匹配到想要的路由，都会匹配一遍所有的路由）
vue的路由是：排他性路由（从路由表上向下进行匹配，找到就不会向下匹配）
react的路由想要成为排他性路由方式：
// 1. 从react-router-dom中引入Switch
import { Switch } from 'react-router-dom'
// 2. 将Switch组件包裹在Route组件外层
<Switch>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
</Switch>
Switch组件是用来包裹Route组件的，用于路由匹配的时候，只匹配一个，也就是将包容性路由转换成排他性路由
存在的问题：当首页的路由是的url路径是：/ 时，会出现无论你点击切换到哪个组件时，Home组件的内容都会显示。
解决方式：
- 将url为 / 的Route放到最下面
- 在Route中添加
exact属性，进行精准匹配
路由嵌套
路由嵌套就是在其中的一个子路由里面继续使用Link和Route组件
import React from 'react'
import { Link, Route } from 'react-router-dom';
import Detail from './Detail'
const Home = () => {
return (
<>
<p>欢迎进入首页</p>
<ul>
<li>
<Link to='/home/detail'>详情页</Link>
</li>
</ul>
<hr />
<Route path='/home/detail' component={Detail}></Route>
</>
);
}
export default Home;
注意：如果一个路由有下一级的路由，那么这个路由就不要加exact属性，会使得当前路由及其子路由都显示不出来。
当一个组件变成路由组件后，那么props里面会自动有路由信息。
此时可以通过：
// 类组件
const {
match: { path },
} = this.props
// 函数组件
const { match: { path } } = props
拿到一级路由的url，就可以在编写二级路由的url的时候，使用变量代替一级路由的url。
这样写的好处：只要直接修改一级路由的url所有的二级路由中的url就可以不需要修改，直接使用。
const {
match: { path },
} = this.props
// 原来写法：
<Route path="/home/sale" component={Sale}></Route>
<Route path="/home/about" component={About}></Route>
// 使用变量：
<Route path={`${path}/sale`} component={Sale}></Route>
<Route path={`${path}/about`} component={About}></Route>
动态路由
params传参（/detail/:id）
react中动态路由的写法和vue是完全一样的，也是例：/detail/:id
<ul>
<li>
<Link to="/home/detail/234">详情页</Link>
</li>
<li>
<Link to="/home/detail/567">详情页</Link>
</li>
</ul>
<Route path="detail/:id" component={Detail}></Route>
const Detail = (props) => {
// ? 可选链操作符，表示可有可无
const id = props.match?.params?.id;
}
query传参（/detail?id=123&name=‘zs’）
传递/detail?id=123&name=‘zs’
- 方式一：字符串格式
// 方式一：
<Link to="/detail?id=123&name=zs">详情页</Link>
<Route path="detail" component={Detail}></Route>
- 方式二：对象格式
// 方式二：
<Link to={{
pathname: '/detail',
search: '?id=123&name=zs',
hash: '#abz',
// 在url上面不可见的传参方式
state:{
x: 10,
y: 20
}
}}></Link>
<Route path="detail" component={Detail}></Route>
获取/detail?id=123&name='zs’中的id
- 方式一：查询字符串转对象
// 要转换的查询字符串
var str = "name=zs&age=18";
// 封装一个函数
function parseQueryString(str) {
// 准备一个接收的空对象
var obj = {};
// 将每一个数值分隔开
var s1 = str.split('&');
// console.log(s1); // ['name=zs', 'age=18']
// 将数组中的值依次放入对象中
s1.forEach(function(item) {
// 将每个数组里面的字符串按照等号分割开,得到若干个数组
var t = item.split('=');
var key = t[0];
var value = t[1];
obj[key] = value;
});
return obj;
}
// 调用函数
var result = parseQueryString(str);
console.log(result); // {name: 'zs', age: '18'}
- 方式二：通过 new URL()
const Detail = (props) => {
// 2.通过 new URL()：必须有一个基准地址才能解析
const urlObj = new URL('http://www.a.com' + props.location.search)
const id = obj.searchParams.get("id")
}
- 方式三：通过new URLSearchParams()
// 3.通过new URLSearchParams()
const urlObj = new URLSearchParams(props.location.search);
const id = urlObj.get("id")
路由组件渲染方式
使用component属性来渲染路由组件（很多情况下使用）
<Route path="/home" component={Home}></Route>
使用render属性来渲染路由组件
<Route path="/about" render={About}></Route>
-
与component属性方式的区别：render属性不能渲染类组件
如果想要渲染类组件可以通过：在类组件的外面套一层函数（() => ）
因此，通过render属性里面的函数形式，就可以进行条件判断，进行路由鉴权操作
<Route path="/about" render={
(props) => {
// 做路由鉴权
if(token){
<Cart/>
}else{
<Login/>
}
}>
</Route>
使用children属性来渲染路由组件
<Route path="/mine" children={Mine}></Route>
特点：
- 当没有Switch组件的时候，children的效果是不管是否匹配都会直接渲染
- 当有Switch组件的时候，children属性效果和render属性完全一样
使用Route插槽来渲染路由组件
<Route path="/cart">
<Cart />
</Route>
特点：
- 既可以渲染类组件，也可以渲染函数组件
- 缺点：但是渲染的组件默认是没有路由信息的
解决没有路由信息方式：
可以通过withRouter
withRouter是一个高阶组件，作用是让那些没有路由信息的组件直接拥有路由信息
// 1. 从react-router-dom解构withRouter高阶组件
import {withRouter} from "react-router-dom";
// 2. 使用withRouter
class Cart extends React.Component {
render() {
console.log(this.props);
return <div>购物车页面</div>;
}
}
const Cart2 = withRouter(Cart);
4个hooks来帮助获取
分别是：useHistory、useLocation、useParams、useRouteMatch
相比withRouter，使用hooks方式的好处：hooks不会使组件层级变深
// 1. 从react-router-dom解构hooks
import {
useHistory,
useLocation,
useParams,
useRouteMatch,
} from "react-router-dom";
// 2. 函数组件使用
const Cart = () => {
const location = useLocation();
console.log(location);
const histroy = useHistory();
console.log(histroy);
const match = useRouteMatch();
console.log(match);
const params = useParams();
console.log(params);
return <div>购物车页面</div>;
};
路由重定向
解构Redirect组件
// 从react-router-dom中解构Redirect组件
import { Redirect } from 'react-router-dom';
使用Redirect组件
<Redirect from="/" to="/home"></Redirect>
from属性：指定源路径to属性：指定目标路径
// 解构Route和Switch组件
import { Switch, Route } from 'react-router-dom';
<Switch>
<Redirect from="/" to="/home" exact></Redirect>
<Route></Route>
</Switch>
需要注意的点：
在使用重定向时，为了防止重定向匹配到与路径相似的所有路径。可以采取以下两种方式：
- 可以添加exact属性
- 可以将Redirect组件放所有Route组件的最下面
路由鉴权
封装的路由鉴权的组件
const Auth = (props) => {
return (
<Route
path={props.path}
render={() => {
if (localStorage.getItem("token")) {
return props.children;
} else {
return (
<Redirect
from={props.path}
to={{
pathname: "/login",
state: {
from: props.path,
},
}}
></Redirect>
);
}
}}
></Route>
);
};
使用路由
<Switch>
<Redirect from="/" to="/home" exact></Redirect>
<Route path="/home" component={Home}></Route>
<Auth path="/about">
<About />
</Auth>
<Auth path="/mine">
<Mine />
</Auth>
<Route path="/login">
<Login />
</Route>
</Switch>
编程式导航
编程式导航：通过使用histroy对象下面的push/replace/go/goBack/goForward
// 1. 从react-router-dom中解构useHistory
import {useHistory} from "react-router-dom";
// 2. 使用编程式导航
const login = () => {
localStorage.setItem("token", "12345");
histroy.push(location.state.from);
};
react-router-dom的history对象中常见的方法有以下几种，它们分别是：
- push(path, [state]): 将新的URL添加到历史记录中，从而进行页面导航。path为要跳转的页面路径，state为要传递给该页面的状态对象。
- replace(path, [state]): 替换当前历史记录中的URL，并使用新的URL进行导航。path为要跳转的页面路径，state为要传递给该页面的状态对象。
- go(n): 在浏览器历史记录中前进或后退指定的步数，例如go(1)代表前进一步，go(-1)代表后退一步。
- goBack(): 后退一步。
- goForward(): 前进一步。
- listen(listener): 添加一个持续监听历史记录变化的回调函数，该函数会在历史记录发生变化时被调用，并返回一个用于卸载该回调函数的函数。
NavLink
NavLink和Link一样，是用来做路由跳转的
Link的功能NavLink都有，并且多了一个高亮的效果
// 1. 从react-router-dom中解构NavLink
import { Route, NavLink } from "react-router-dom";
<ul>
<li>
<NavLink to="/home" activeClassName="select">
首页
</NavLink>
</li>
<li>
<NavLink to="/about" activeClassName="select">
关于页
</NavLink>
</li>
</ul>
使用NavLink组件会在组件上自动添加名为active的类名，用于写高亮的样式
如果要修改active的类名，可以直接使用activeClassName类名
NavLink组件也可以添加exact进行高亮的精准匹配
Prompt
Prompt是React Router中的一种路由组件，它用于在用户离开当前页面之前显示一个确认对话框。
作用：可以防止用户意外地离开当前页面，提示用户保存未提交的信息或确认他们要离开当前页面。
Prompt相当于Vue路由导航守卫中的beforeRouteLeave
Prompt 组件的两个属性：
when属性设置为isDirty，这意味着只有当isDirty为true时，确认对话框才会显示。message属性用来指定确认对话框上显示的消息。
import { Prompt } from 'react-router-dom';
function MyForm() {
const [isDirty, setIsDirty] = useState(false);
const handleFormChange = () => {
setIsDirty(true);
};
return (
<form onChange={handleFormChange}>
<label htmlFor="name">Name:</label>
<input type="text" id="name" />
<Prompt
when={isDirty}
message="Are you sure you want to leave without saving?"
/>
</form>
);
}
404页面
path=“*”
<Switch>
<Redirect from="/" to="/home" exact></Redirect>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
{/* 404路由 */}
<Route path="*" component={NotFound}></Route>
</Switch>
注意点：
- 要写在所有Route的最下面
不放在最下面，会跳转导致404 Route以下的Route时都跳转404
- 必须要和Switch组件一起使用
不使用Switch组件时，无论要跳转到哪个页面404页面都会一起存在
路由表
在App.jsx同级目录下新建router文件夹并在其文件夹中新建Index.jsx文
引入根组件及其各级路由
import React from 'react'
import { Route, Redirect } from 'react-router-dom'
// 引入根组件
import App from '../App';
// 引入一级路由
import Home from '../pages/home/Index'
import Detail from '../pages/detail/Index'
import Login from '../pages/login/Index'
import City from '../pages/city/Index'
import NotFound from '../pages/notfound/Index'
// 引入二级路由
import Movies from '../pages/home/movies/Index'
import Videos from '../pages/home/videos/Index'
import Mini from '../pages/home/mini/Index'
import Show from '../pages/home/show/Index'
import Mine from '../pages/home/mine/Index'
// 引入三级路由
import Hot from '../pages/home/movies/hot/Index'
import Wait from '../pages/home/movies/wait/Index'
import Cinema from '../pages/home/movies/cinema/Index'
import Classic from '../pages/home/movies/classic/Index'
将组件嵌套渲染
const Index = () => {
return (
<App>
<Redirect from="/" to='/home' exact></Redirect>
<Route path='/home'>
<Home>
<Redirect from='/home' to='/home/movies' exact></Redirect>
<Route path='/home/movies'>
<Movies>
<Redirect from='/home/movies' to='/home/movies/hot' exact></Redirect>
<Route path='/home/movies/hot'><Hot /></Route>
<Route path='/home/movies/wait'><Wait /></Route>
<Route path='/home/movies/cinema'><Cinema /></Route>
<Route path='/home/movies/classic'><Classic /></Route>
</Movies>
</Route>
<Route path='/home/videos'><Videos /></Route>
<Route path='/home/mini'><Mini /></Route>
<Route path='/home/show'><Show /></Route>
<Route path='/home/mine'><Mine /></Route>
</Home>
</Route>
<Route path='/detail/:id'><Detail /></Route>
<Route path='/login'><Login /></Route>
<Route path='/city'><City /></Route>
<Route path='*'><NotFound /></Route>
</App>
);
}
导出Index组件
export default Index;
在入口文件index.js中，将原本引入App组件改为引入路由组件Index
在原先放置各级路由的组件中使用props.children接收路由表中的路由
// eg:
const App = (props) => {
return (
<>
<Switch>
{props.children}
</Switch>
</>
);
}
路由懒加载
从react中解构lazy方法，然后进行按需引入
// 1.从react中解构lazy方法
import { lazy } from 'react'
原来写法
import Home from '../pages/home/Index'
改为按需引入
const Home = lazy(() => import('../pages/home/Index'))
封装懒加载组件
fallback={}中可以是标签或组件<Child/>
import React, { Suspense } from 'react'
const Lazys = (props) => {
return (
<Suspense fallback={<div>loading...</div>}>{props.component}</Suspense>
);
}
export default Lazys;
进行路由懒加载
// 引入封装的组件
import Lazys from './Lazys';
// 懒加载处理后的路由表
const Index = () => {
return (
<App>
<Redirect from="/" to='/home' exact></Redirect>
<Route path='/home'>
<Lazys component={
<Home>
<Redirect from='/home' to='/home/movies' exact></Redirect>
<Route path='/home/movies'>
<Lazys component={
<Movies>
<Redirect from='/home/movies' to='/home/movies/hot' exact></Redirect>
<Route path='/home/movies/hot'>
<Lazys component={<Hot />} />
</Route>
<Route path='/home/movies/wait'>
<Lazys component={<Wait />} />
</Route>
<Route path='/home/movies/cinema'>
<Lazys component={<Cinema />} />
</Route>
<Route path='/home/movies/classic'>
<Lazys component={<Classic />} />
</Route>
</Movies>
} />
</Route>
<Route path='/home/videos'>
<Lazys component={<Videos />} />
</Route>
<Route path='/home/mini'>
<Lazys component={<Mini />} />
</Route>
<Route path='/home/show'>
<Lazys component={<Show />} />
</Route>
<Route path='/home/mine'>
<Lazys component={<Mine />} />
</Route>
</Home>
} />
</Route>
<Route path='/detail/:id'>
<Lazys component={<Detail />} />
</Route>
<Route path='/login'>
<Lazys component={<Login />} />
</Route>
<Route path='/city'>
<Lazys component={<City />} />
</Route>
<Route path='*'>
<Lazys component={<NotFound />} />
</Route>
</App >
);
}
结束语：
希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪
2127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
