react路由配置,路由跳转与传值,路由监听
1.react路由配置
1.1 下载react的路由模块
(默认最新6.3, 如需使用5.x, 在模块名后加@5)
npm install react-router-dom --save // 6.0
或
npm install react-router-dom@5 --save // 5.0
1.2 在入口文件 src/index.js中,从路由模块导入工具组件HashRouter ,并包裹根组件
(注: 哈希模式用 HashRouter ，历史模式用 BrowserRouter)
import { HashRouter } from 'react-router-dom'
ReactDOM.render(
);
1.3 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route
- router5.0使用Switch ，router6.0使用Routes
import { Switch, Route } from "react-router-dom"; // 5.0
或
import { Routes, Route } from "react-router-dom"; // 6.0
1.4 创建路由组件，配置路由，并导出
- router6.0 去除了exact, 并把component引入组件构造器改成了element引入组件实例
export default function MyRouter(){ // 5.0
return(
)
}
或
export default function MyRouter(){ // 6.0
return(
} />
)
}
1.5 在App.js中导入路由组件
import RouterView from './router/index';
1.6 在根组件App模板中添加路由组件，即路由出口
1.7 在需要跳转的页面, 从路由模块导入工具组件 Link
import {Link} from 'react-router-dom'
1.8 使用Link组件执行路由跳转
首页/Link>
注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息
2.react 路由跳转和传值
路由控制跳转的组件中（一般是views目录下的页面组件），props会自动添加以下三个字段（根组件和components中的组件没有路由信息）
history：注意用于路由跳转和路由监听
location：主要显示路由信息，可用于路由传值
match：主要用于路由传值，也可展示路由信息
2.1 react路由跳转
2.1.1 路由标签Link跳转
跳转个人中心
2.1.2 编程式导航跳转
2.2 react路由传值
2.2.1 Link标签跳转传值
(1) url路径拼接传值
url路径拼接传值
接收：
{decodeURI(this.props.location.search)}
(2) 动态路由传值
动态路由(友好url)传值
接收：
{this.props.match.params.name}
(3) 自定义对象传值
自定义对象传值
接收：
{this.props.location.data && this.props.location.data.name}
2.2.2 编程式导航跳转传值
若有需求：点击图片跳转到个人中心页，并传入新闻标题
1，路由跳转不传值时，直接使用this.props.history.push(“/user”)
2，路由跳转并传值，方法如下：
(1) 路由url路径拼接传值
this.props.history.push('/user?title='+title)
目标组件（用户页）通过 decodeURI(props.location.search) 接收：
路由url拼接传值: {decodeURI(props.location.search)}
- decodeURI 解码， encodeURI 编码
(2) 动态路由（友好型url）传值
this.props.history.push('/user/'+title)
添加个人页的动态路由用于传值：
目标组件通过 props.match.params 接收
动态路由传值: {props.match.params.title}
(3) 自定义对象传值
this.props.history.push({
pathname: "/user",
data: { title }
})
目标组件通过 props.location 接收
自定义对象传值: {props.location.data && props.location.data.title}
-
为防止报错可以加条件判断，使用 && 判断或使用 三目运算
-
这里使用&&判断，前面有值就显示&&后面的值，前面的没值就显示空
2.3 三种路由传值方式对比
(1) url路径传值
- 优点：传值简单
- 缺点：取值是url编码后的字符串，解析麻烦
(2) 动态路由传值
- 优点：取值方便
- 缺点：配置麻烦
(3) 自定义对象传值
- 优点：传值取值方便
- 缺点：网页刷新数据会丢失，需要结合storage（在每次传值后都把数据存储到本地storage中）
总结：建议使用 动态路由传值
3.react路由监听
3.1 局部路由监听
- 在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle
var cancel = props.history.listen((route, type)=>{
console.log("User路由监听", route.pathname, type);
})
在用户页局部监听路由，props.history.listen() 函数添加路由监听，类似事件监听的addEvevtLististener，可以重复监听
导致的结果就是，每次跳转到这一页都会添加新的监听，路由跳转的过程中，监听函数会越来越多，造成性能浪费甚至bug
解决方案：
(1) 在页面卸载时取消监听
// 模拟10秒后，组件销毁并取消监听
setTimeout(()=>{
cancel()
}, 10000)
- 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能
(2) 在全局根组件App.js中监听路由
注意：局部监听只能监听此组件离开时的路由, 类似于vue中beforeRouteLeave() 路由守卫
3.2 全局路由监听
3.2.1 在App.js中从路由模块导入withRouter
import { withRouter } from 'react-router-dom';
- react路由5.0提供了withRouter函数可以给任意组件添加路由信息
3.2.2 导出时用withRouter函数包裹组件后导出, 把路由数据添加到props中
export default withRouter(App);
- 在导出组件时，使用withRouter包裹组件即可传入路由信息
3.2.3 在App根组件的componentDidMount函数中添加全局路由监听
- 需要在组件渲染后的生命周期中，全局监听路由
componentDidMount() {
console.log(this.props)
this.props.history.listen(path=>{
console.log("全局路由监听" + path.pathname)
})
}