P03: React Router路由动态传值
上节内容我们解决了链接跳转的问题,那现在想象这样一个场景,在一个很多文章的列表页面,然后点击任何一个链接,都可以准确的打开详细的文章内容,这就需要靠传递文章 ID,然后后台准确检索文章内容最后呈现。这个过程每次传递到详细页面的 ID 值都是不一样的,所以就需要路由有动态传值的能力。
在 Route 上设置允许动态传值
这个设置是以:
开始的,然后紧跟着你传递的 key(键名称)名称。我们来看一个简单的例子。
<Route path="/list/:id" component={List} />
看过代码后,你会觉的很简单,就是在path
上加:id
。这样就设置了允许传值的规则。
Link 上传递值
设置好规则后,就可以在Link
上设置值了,现在设置传递的 ID 值了,这时候不用再添加 id 了,直接写值就可以了。
<li><Link to="/list/123">列表</Link> </li>
现在就可以进行传值了。为了方便你的学习,这里给出全部AppRouter.js
代码。
import React from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import Index from './Pages/Index' import List from './Pages/List' function AppRouter() { return ( <Router> <ul> <li> <Link to="/">首页</Link> </li> <li><Link to="/list/123">列表</Link> </li> </ul> <Route path="/" exact component={Index} /> <Route path="/list/:id" component={List} /> </Router> ); } export default AppRouter;
在 List 组件上接收并显示传递值
组件接收传递过来的值的时候,可以在声明周期componentDidMount
中进行,传递的值在this.props.match
中。我们可以先打印出来,代码如下。
import React, { Component } from 'react'; class List extends Component { constructor(props) { super(props); this.state = { } } render() { return ( <h2>List Page</h2> ); } //-关键代码---------start componentDidMount(){ console.log(this.props.match) } //-关键代码---------end } export default List;
然后在浏览器的控制台中可以看到打印出的对象,对象包括三个部分:
- patch:自己定义的路由规则,可以清楚的看到是可以传递 id 参数的。
- url: 真实的访问路径,这上面可以清楚的看到传递过来的参数是什么。
- params:传递过来的参数,
key
和value
值。
明白了 match 中的对象属性,就可以轻松取得传递过来的 ID 值了。代码如下:
import React, { Component } from 'react'; class List extends Component { constructor(props) { super(props); this.state = { } } render() { return ( <h2>List Page->{this.state.id}</h2> ); } componentDidMount(){ // console.log(this.props.match.params.id) let tempId=this.props.match.params.id this.setState({id:tempId }) } } export default List;
这样就实现了动态传值,需要注意的是如果你不传任何东西,是没办法匹配路由成功的。
当然上面讲的动态传递的值是写死的,缺少灵活性,但是却给大家讲了很多动态传值的理论,也算是对 React Router 动态传值有了初步认识。
接下来,我们根据上面的理论基础知识来做一个 小练习,形象的模拟一个动态的数据列表,并把列表中的值传递到详细页中去。
模拟一个列表数组
现在可以在Index
组件里模拟一个列表数组,就相当于我们从后台动态获取到的内容,然后数组中包括文章的cid
和title
。直接在 state 初始化时进行设置,代码如下:
constructor(props) { super(props); this.state = { list:[ {uid:123,title:'码云笔记的个人博客-1'}, {uid:456,title:'码云笔记的个人博客-2'}, {uid:789,title:'码云笔记的个人博客-3'}, ] } }
有了list
数组后,再修改一下 UI,进行有效的遍历,Render
代码如下。
render() { return ( <ul> { this.state.list.map((item,index)=>{ return ( <li key={index}> {item.title} </li> ) }) } </ul> ) }
列表已经可以在Index
组件里显示出来了,接下来可以配置<Link>
了,在配置之前,你需要先引入Link
组件。
import { Link } from "react-router-dom";
引入后直接使用进行跳转就可以,但是需要注意一点,要用{}
的形式,也就是把to
里边的内容解析成 JS 的形式,这样才能顺利的传值过去。
render() { return ( <ul> { this.state.list.map((item,index)=>{ return ( <li key={index}> <Link to={'/list/'+item.uid}> {item.title}</Link> </li> ) }) } </ul> ) }
到目前为止,已经很类似我们项目中的列表向详细页进行传值了。为了方便你学习,给出Index.js
的所有代码.
mport React, { Component } from 'react'; import { Link } from "react-router-dom"; class Index extends Component { constructor(props) { super(props); this.state = { list:[ {uid:123,title:'码云笔记的个人博客-1'}, {uid:456,title:'码云笔记的个人博客-2'}, {uid:789,title:'码云笔记的个人博客-3'}, ] } } render() { return ( <ul> { this.state.list.map((item,index)=>{ return ( <li key={index}> <Link to={'/list/'+item.uid}> {item.title}</Link> </li> ) }) } </ul> ) } } export default Index;
GIF 图演示:
总结
通过三小节的学习,相信你一定对React Router
有了基本的了解,接下来的学习会稍微提升一点难度,所以你先要把这前三小节基础知识学好,练好,再向下进行。
码云笔记 » P03: React Router路由动态传值