一.React路由介绍
现在的前端应用多时候SPA(Single Page application),也就是只有一个html页面的程序,因为它的用户体验跟好,对服务器的压力更小,所以更加受欢迎,为了有效的使用单个页面来管理多个页面的功能,前端路由应用而生
- 前端路由的功能:让用户从一个视图(页面)导航到另外一个视图(页面)
- 前端路由就是一套映射骨子额,在react中,url的path与组件的对应关系
- 使用react路由简单来说,就是配置路径和组件的匹配
二.路由的基本使用
官方地址 https://reactrouter.com/web/guides/quick-start
- 安装
react-router-dom
yarn add react-router-dom
- 路由的核心组件
Router 组件
BrowserRouter 组件
HashRouter 组件
Route 组件
Link 组件
NavLink 组件
Switch 组件
Redirect 组件
withRouter包装路由组件
三.路由传递参数
- 1.params参数
路由链接(携带参数) <Link to='/xxx/1'>详情</Link>
注册路由(声明接受) <Route path='/xxx/:id' component={组件名称}></Route>
接受参数: this.props.match.params
- 2.search参数
路由链接(携带参数): <Link to='/xxx/id?1'>详情</Link>
注册路由(无需声明,整除注册即可) : <Route path='/xxx' component={组件名称}></Route>
接受参数: this.props.location.serach,结合querystring解析
- 3.state参数
路由链接(携带参数): <Link to={{path:"xxx",state:{id:1}}}>详情</Link>
注册路由(无需声明,整除注册即可) : <Route pathname='/xxx' component={组件名称}></Route>
接受参数: this.props.location.state
特点:刷新'也'可以用(同上)
push与replace模式,replace不留下痕迹(前进,后退)
四.编程式导航
replace与push
- 1.replace跳转+携带params参数
/
this.props.history.replace("/xxx/id");
- 2.replace跳转+携带query参数
?
this.props.history.replace("/xxx?id");
