2 官方插件

约 1559 字大约 5 分钟

2025-06-01

react-router是react的路由库，其中包含默认，dom，native，any

默认的react-router是服务端渲染使用的
dom：用于react的web应用
native：用于react native移动端应用
any：二者都能使用

web

库名为：react-router-dom

常用组件

BrowserRouter：history模式的路由器
HashRouter：hash模式的路由器
Link：用于路由跳转，但必须要被包裹在Router组件中，被点击后会将路由跳转的信息发送给包裹自己的router组件，由在同一个router组件中的route显示相应的内容
Route：用于路由组件展示，必须被包裹在Router组件中，需要在内部指定匹配的路径和要加载的组件
NavLink：被点击时会给自身默认添加一个active的类名，其他的和Link一样。也可以自己指定active的类名，使用activeClassName属性
Switch：用于包裹Route标签，如果没有使用switch组件包裹的route组件多个route组件匹配同一个路由时就会都显示出来，如果使用Swtich组件包裹的route组件之会找到第一个匹配的显示出来并返回
Redirect：重定向，通常写在Switch组件中，如果前面的路由都无法匹配那么就跳转Redirect指定的路由

路由在跳转时会默认给对应的组件传props，即使组件没有定义props

history：其中带有用于函数式编程导航的函数
location：
match：

两个link默认都是push模式，可以将replace属性指定为true改为replace模式

[!NOTE] Title 使用BrowserRouter跳转时有多个/分隔子路径如：/index/food可能会导致css样式丢失问题，路由可能会将子路径前的路径也添加到url当做资源路径中从服务器获取资源，这种情况需要将./css引入的样式改成/css，或者使用hash模式

模糊匹配

<Router>
	<NavLink to='/home'>home</NavLink>  //都可以匹配到
	<NavLink to='/home/a/b'>home</NavLink> //第一个route可以匹配到
	<NavLink to='/a/home'>home</NavLink> //都不能匹配到

	<Route path='/home'></Route>
	<Route exact={true} path='/home'></Route>  //开启严格模式
</Router>

如果匹配到的路径后续还有多余路径那么Route也会进行拆分并跳转到首个路径，开启严格模式后就只能匹配完全相同的路径

开启严格模式后该路径下也无法匹配子路径了，请慎重开启

多级路由

要实现多级路由只能从根路径开始指定

<NavLink to='/home/a/b/c'>home</NavLink>
<Route path='/home/a/b/c'></Route>

路由传参

params

路由传参的params在跳转时传参的match属性中

<NavLink to=`/home/${id}`>home</NavLink>
<Route path='/home/:id'></Route>

在对应要显示的组件中使用this.props.match.params就可以获取到路由传递的参数了

search

路由传参的params在跳转时传参的location属性中

<NavLink to=`/home?id=${id}&name=${name}`>home</NavLink>
<Route path='/home'></Route>

在对应要显示的组件中使用this.props.location.query就可以获取到路由传递的参数了但是获取到的是一个字符串，还需要使用react自带的库解析出来

state

路由传参的state在跳转时传参的location属性中

<NavLink to={{pathname:'/home',state:{id:this.id,name:this.name}}}>home</NavLink>
<Route path='/home'></Route>

在对应要显示的组件中使用this.props.location.state就可以获取到路由传递的参数了

使用state传值虽然不会在地址栏中显示出来，但是刷新页面后依旧不会丢失state的值，因为路由跳转是由Router组件维护的，它维护了bom的history，在跳转前Router组件就将state维护到bom带history中

编程式路由导航

在路由跳转时会传递三个props：history、location、match 在history中带有push、replace、back、forward等函数可以用于编程式路由导航

withRouter

但如果没有其他路由跳转到该组件时就无法使用history、location、match等api

使用withRouter函数包装组件和，返回的组件就具有这三个api了可以使用编程式路由导航了

配置路由

使用createBrowserRouter函数创建路由配置，使用<RouterProvider router={router}/>组件绑定返回的路由配置

createBrowserRouter相当于vue的createRouter，RouterProvider组件绑定后相当于vue的app.use(router)+<router-view/> 要创建hash模式的router需要使用createHashRouter

redux

三个核心概念

action

动作的对象，包含2个属性

type：标识属性，值为字符串，唯一，必要属性
data：数据属性，值类型任意，可选属性

{type:ADD_STUDENT'data:{(name:'tom'age:18}}

reducer

用于初始化状态、加工状态。加工时，根据l旧的state和action，产生新的state的纯函数。

store

将state、action、reducer联系在一起的对象

步骤

定义一个reducer函数（根据当前想要做的修改返回一个新的状态）
使用createStore方法传入reducer函数生成一个store实例对象
使用store实例的subscribe方法订阅数据的变化（数据一旦变化，可以得到通知）
使用store实例的dispatch方法提交action对象触发数据变化（告诉reducer你想怎么改数据）
使用store实例的getState方法获取最新的状态数据更新到视图中

reduxjs/toolkit

原本的redux比较难用，后来经过几次封装reduxjs/toolkit是一种比较常用的方案，使用方法也更贴近于vuex

在业务比较复杂的情况下推荐使用切片的方式，将不同业务分割为不同的切片

创建切片

name：切片命名，必填
initialState：初始化State，其中的数据可以被reducers中的函数使用
reducers：定义修改状态的函数，相当于vuex中mutation
extraReducers：异步的函数，异步函数需要使用createAsyncThunk创建

let changeNumThunk = createAsyncThunk('numSlice/changeMes',async()=>{
	
})

let countSlice = createSlice({
	name:'countSlice',
	initialState:{
		count:0
	},
	reducers:{
		addNum(state,action){
			state.num++
		}
	}，
	extraReducers:(chunk)=>{
		chunk.addCase(changeNumThunk.pending,()=>{
			// pending状态做的处理
		})
		.addCase(changeNumThunk.fulfilled,(state,action)=>{
			// fulfilled阶段做的处理
		})
	}
})

根据切片生成store

let store = configureStore({
	reducer:{
		numReducer:numSlice.reducer,
	}
})

贡献者

pinkdopeybug

版权所有

版权归属：PinkDopeyBug

许可证：署名 4.0 国际 (CC-BY-4.0)

2 官方插件

公告