问题导向
react生命周期何时调用?以及应用场景?
如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案
简单使用
第一步:安装react-router-dom
yarn add react-router-dom
第二步:从react-router-dom引出路由组件
import {
BrowserRouter, Switch, Route } from 'react-router-dom'
第三步:在App页面使用
import React from 'react'
import {
BrowserRouter, Switch, Route } from 'react-router-dom'
import Home from './pages/home'
import Order from './pages/order'
import NotFount from './pages/notFount'
const App = () => {
return (
<>
<BrowserRouter>
<Switch>
<Redirect exact from='/' to='/home' />
<Route path="/home" component={
Home} />
<Route path="/order" component={
Order} />
<Route component={
NotFount} />
</Switch>
</BrowserRouter>
</>
)
}
export default App
react-router-dom导出的组件
HashRouter 和 BrowserRouter 根容器
Switch 精准匹配
Route 路由规则
Link 声明式跳转
NavLink 声明式跳转 + 样式
Redirect 重定向
withRouter 高阶组件,将组件变成路由组件
HashRouter 和 BrowserRouter
定义:路由的根容器,记录浏览记录,并传入各组件数成员,任何组件都可以使用历史对象
HashRouter生成的路由地址前面会加一个#号
属性:basename统一前缀
<BrowserRouter basename="/api">
</BrowserRouter>
Switch
会匹配第一条符合的子规则,解决模糊匹配,不再需要exact
需要注意排序,从最特别的到最一般的,一般与404页面配合使用
Route
定义:路由规则,注册/定义路由
path属性:告诉路由什么URL地址
component属性:告诉路由去哪个组件,并向组件传递了3个属性,组件可通过props获取
如果想让路由规则,进行精确匹配,可以为 Route,添加 exact 属性,表示启用精确匹配模式
从路由规则中,提取匹配到的参数,可以使用props来访问
Route对象的3个属性:
- history:用来做命令式导航
- location:当前的URL信息
- match:用来获取参数信息
用法
第一种:
<Route exact path="/home" component={
Home} />
第二种:该方式获取不到路由对象
<Route path="/home" component={
() => <Home />} />
第三种:传递参数
<Route path="/home/:type/:id" component={
Home} />