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:传递过来的参数,keyvalue值。

明白了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组件里模拟一个列表数组,就相当于我们从后台动态获取到的内容,然后数组中包括文章的cidtitle。直接在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路由动态传值

总结

通过三小节的学习,相信你一定对React Router有了基本的了解,接下来的学习会稍微提升一点难度,所以你先要把这前三小节基础知识学好,练好,再向下进行。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P03: React Router路由动态传值

发表评论

提供最优质的资源集合

立即查看 了解详情