路由肯定是单页面应用很重要的一部分,控制页面的跳转、传参等等,vue中有vue router,当然react中有react router,都是官方所推荐的插件,如果你刚学react,或者是你在公司使用react,但对react router路由的使用不是很熟练的,那么本文能带给你一定的收获
当你需要从一个页面,传递某些数据给另一个页面时,你可以通过路由传参来实现
路由配置
{
/* exact精准匹配,但url末尾加/也可以匹配到;配合strict,来解决exact末尾加/能匹配的问题 */}
<Route exact strict path="/index" component={
Demo1} />
跳转方式
// html:
<Link to="/index">demo1</Link>
// js:
this.props.history.push('/index')
router路由配置
import React from 'react'
import {
// HashRouter as Router,
BrowserRouter as Router,
Route,
Switch,
} from 'react-router-dom'
import MainLayout from '../compotents/layout/MainLayout' // 嵌套路由使用
import Home from '../containers/home'
import NotFound from '../containers/404'
import Demo1 from '../containers/demo1'
import Demo2 from '../containers/demo2'
import Demo3 from '../containers/demo3'
import Demo4 from '../containers/demo4'
import Demo5 from '../containers/demo5'
import Demo6 from '../containers/demo6'
import Demo7 from '../containers/demo7'
const BasicRouter = () => (
<Router>
<Switch>
<Route exact path="/" component={
Home} />
<Route
path="/index"
// 嵌套路由
render={
() => (
<MainLayout>
{
/* exact精准匹配,但url末尾加/也可以匹配到;配合strict解决exact末尾加/能匹配的问题 */}
<Route exact strict path="/index" component={
Demo1} />
<Route exact path="/index/demo2" component={
Demo2} />
<Route exact path="/index/demo3" component={
Demo3} />
</MainLayout>
)}
/>
<Route path="/demo4" component={
Demo4} />
<Route exact path="/demo5" component={
Demo5} />
<Route exact path="/demo6/:id" component={
Demo6} />
{
/* ?代表该参数可有可无 */}
<Route exact path="/demo7/:pId?/:age" component={
Demo7} />
<Route path="*" component={
NotFound} />
</Switch>
</Router>
)
export default BasicRouter
特点:
1、BrowserRouter(history)模式下,刷新页面参数不消失,参数不会在地址栏显示,因为state保存在history对象中
2、HashRouter(hash)模式下,刷新页面参数消失!!!参数不会在地址栏显示
路由配置
<Route exact path="/index/demo2" component={
Demo2} />
跳转方式
// html:
<Link to={
{
pathname: '/index/demo2', state: {
id: 2 }}}>demo2</Link>
// js:
this.props.history.push({
pathname: '/index/demo2', state: {
id: 2 }})
获取值
this.props.location.state.id
特点:刷新页面参数消失,参数不会在地址栏显示
路由配置
<Route exact path="/index/demo3" component={
Demo3} />
跳转方式
// html:
<Link to={
{
pathname: '/index/demo3', query: {
id: 1 } }}>demo3</Link>
// js:
this.props.history.push({
pathname: '/index/demo3', query: {
id: 1 } })
获取值
this.props.location.query.id
特点:刷新页面参数不消失,参数会在地址栏显示
路由配置
<Route exact path="/demo6/:id" component={
Demo6} />
跳转方式
// html:
<Link to={
'/demo6/1'}>demo6</Link>
// js:
this.props.history.push('/demo6/1')
获取值
this.props.match.params.id
特点:刷新页面参数不消失,参数会在地址栏显示
路由配置
<Route path="/demo4" component={
Demo4} />
跳转方式
// html:
<Link to={
'/demo4?id=1&type=5'}>demo4</Link>
// js:
this.props.history.push('/demo4?id=1&type=5')
获取值
this.props.location.search // ?id=1&type=5; 获取的是字符串,需处理
代码下载(p-react-router分支):https://gitee.com/staraliang/react17-app/tree/p-react-router
觉得本文写的不错的,希望点赞、收藏、加关注,每月不定期更新干货哦,谢谢您嘞!
你可能感兴趣的文章: