上节内容我们解决了链接跳转的问题，那现在想象这样一个场景，在一个很多文章的列表页面，然后点击任何一个链接，都可以准确的打开详细的文章内容，这就需要靠传递文章 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有了基本的了解，接下来的学习会稍微提升一点难度，所以你先要把这前三小节基础知识学好，练好，再向下进行。