P03: React Router路由动态传值

男娘i 2023-10-06 20:58 38阅读 0赞

#### React Router ####

*  阐述
 *  在Route上设置允许动态传值
 *  Link上传递值
 *  在List组件上接收并显示传递值
 *  模拟一个列表数组
 *  示例
 *   *  ReactRouterDemo\\demo01\\src\\index.js
     *  ReactRouterDemo\\demo01\\src\\AppRouter.js
     *  ReactRouterDemo\\demo01\\src\\Pages\\Index.js
     *  ReactRouterDemo\\demo01\\src\\Pages\\List.js

## 阐述 ##

上节内容我们解决了链接跳转的问题，那现在想象这样一个场景，在一个很多文章的列表页面，然后点击任何一个链接，都可以准确的打开详细的文章内容，这就需要靠传递文章ID，然后后台准确检索文章内容最后呈现。

这个过程每次传递到详细页面的ID值都是不一样的，所以就需要路由有动态传值的能力。

## 在Route上设置允许动态传值 ##

这个设置是以 `:` 开始的，然后紧跟着你传递的 key（键名称）名称。  
我们来看一个简单的例子：

`ReactRouterDemo\demo01\src\AppRouter.js`

看过代码后，你会觉的很简单，就是在 path 上加 `:id`。  
这样就设置了允许传值的规则。

## Link上传递值 ##

设置好规则后，就可以在Link上设置值了，现在设置传递的ID值了，这时候不用再添加 `id`了，直接写值就可以了。

现在就可以进行传值了。

## 在List组件上接收并显示传递值 ##

组件接收传递过来的值的时候，可以在声明周期 `componentDidMount`中进行，传递的值在`this.props.match`中。

我们可以先打印出来,代码如下：

`ReactRouterDemo\demo01\src\Pages\List.js`

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;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

然后在浏览器的控制台中可以看到打印出的对象，对象包括三个部分:

1、`patch：`自定义路由规则，可以清楚的看到是可以传递 `id` 参数的。  
2、`url：`真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。  
3、`params：`传递过来的参数，`key` 和 `value` 值。

明白了 `match` 中的对象属性，就可以轻松取得传递过来的ID值了。代码如下:

`ReactRouterDemo\demo01\src\Pages\List.js`

import React, {
         Component } from 'react';
    
    class List extends Component {
        
        constructor(props) {
        
            super(props);
            this.state = {
          }
        }
        
    	//-关键代码---------start
        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 });
         }
        //-关键代码---------end
    }
    
    export default List;

这样就实现了动态传值，需要注意的是如果你不传任何东西，是没办法匹配路由成功的。  
![在这里插入图片描述][9d1cabf865144d7a90fecc45ad448d03.gif_pic_center]

当然上面讲的动态传递的值是写死的，缺少灵活性，但是却给大家讲了很多动态传值的理论，也算是对React Router动态传值有了初步认识。

## 模拟一个列表数组 ##

接下来，根据上面的理论基础知识来做一个 小练习，形象的模拟一个动态的数据列表，并把列表中的值传递到详细页中去。

现在可以在 `Index` 组件里模拟一个列表数组，就相当于我们从后台动态获取到的内容，然后数组中包括文章的 `cid` 和 `title`。

直接在`state` 初始化时进行设置，代码如下：

`ReactRouterDemo\demo01\src\Pages\Index.js`

constructor(props) {
        
        super(props);
        this.state = {
         
            list:[
                {
        uid:123,title:'willem-1'},
                {
        uid:456,title:'willem-2'},
                {
        uid:789,title:'willem-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>
        )
    }

到目前为止，已经很类似我们项目中的列表向详细页进行传值了。  
![在这里插入图片描述][255a941d400847ed9b3dbbabf25bab4f.gif_pic_center]

## 示例 ##

### ReactRouterDemo\\demo01\\src\\index.js ###

import React from 'react';
    import ReactDOM from 'react-dom'
    import AppRouter from './AppRouter'
    
    ReactDOM.render(<AppRouter/>,document.getElementById('root'))

### ReactRouterDemo\\demo01\\src\\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;

### ReactRouterDemo\\demo01\\src\\Pages\\Index.js ###

import React, {
         Component } from 'react';
    import {
         Link } from "react-router-dom";
    
    class Index extends Component {
        
        constructor(props) {
        
            super(props);
            this.state = {
         
                list:[
                    {
        uid:123,title:'willem-1'},
                    {
        uid:456,title:'willem-2'},
                    {
        uid:789,title:'willem-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;

### ReactRouterDemo\\demo01\\src\\Pages\\List.js ###

import React, {
         Component } from 'react';
    
    class List extends Component {
        
        constructor(props) {
        
            super(props);
            this.state = {
          }
        }
    
        render() {
         
            return (  
                <h2> List Page-> {
        this.state.id}</h2>
            );
        }
    
        //-关键代码---------start
        componentDidMount(){
        
            // console.log(this.props.match.params.id)
            let tempId=this.props.match.params.id;
            this.setState({
        id:tempId });
         }
        //-关键代码---------end
    }
    
    export default List;

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/57db8252ff3f47b285bd1f724095926c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[9d1cabf865144d7a90fecc45ad448d03.gif_pic_center]: https://img-blog.csdnimg.cn/9d1cabf865144d7a90fecc45ad448d03.gif#pic_center
[255a941d400847ed9b3dbbabf25bab4f.gif_pic_center]: https://img-blog.csdnimg.cn/255a941d400847ed9b3dbbabf25bab4f.gif#pic_center