在反应链接中使用参数并在另一个组件中获取它的值？

Posted 2023-02-22

【中文标题】在反应链接中使用参数并在另一个组件中获取它的值？

【英文标题】：Use params in react Link and get the value of it in another component?

【发布时间】：2020-07-22 02:19:54

【问题描述】：

这个问题可能听起来令人困惑，但这就是我的意思， 我有两个完全没有关系的组件，它们基本上不是父母或孩子， 这是第一个组件：

import React from 'react';
import Link from 'react-router-dom';

class Test extends React.Component 
    render() 
        const slug="NewYork"
        return (
            <Link to=`/TestRoute/$slug`>
                City
            </Link>
        );
    ;

export default Test;

这是我的第二个组件：

import React from 'react';
import axios from 'axios';

export default class Api extends React.Component 

    componentDidMount() 
        const options = 
            headers: 
                'Authorization': localStorage.getItem('api_key'),
                'content-type': 'application/json'
            
        ;
        axios.get('urlLink/Slug' , options)
            .then((response) => 
                console.log(response);
            );
    
    render() 
        return <div>
            hi
        </div>
    

我用于第二个组件的 Route` 就是这个

<Route path="/TestRoute/:slug" >
     <FetchRandomUser2 />
</Route>

所以基本上我想要做的是在第一个组件中获取那个 slug 并将其添加到我的 api 调用中的 url 的末尾，但我不知道该怎么做，所以是有没有办法得到那个 slug param 并添加到那个 api 调用的末尾？

【参考方案1】：

假设您的 FetchRandomUser2 组件是您的 Api 组件，并且您只是在导入时为其添加了别名，您想将其传递给 Route，如下所示：

<Route path="/TestRoute/:slug" component=FetchRandomUser2 />

这意味着当它被渲染时，它将接收所有相关的路由道具，例如匹配、位置和历史记录。

这意味着在您的 Api 组件内部，您可以通过执行 this.props.match.params.slug 之类的操作来获取 slug，然后在您的请求中使用它，例如 urlLink/$this.props.match.params.slug

【参考方案2】：

您可以通过访问 ReactRouter 提供的 match 属性来访问您的 URL 的 :slug 参数。

<Route 
    path="/TestRoute/:slug" 
    component=FetchRandomUser2
/>

import React from 'react';
import axios from 'axios';

export default class Api extends React.Component 

    componentDidMount() 
        const options = 
            headers: 
                'Authorization': localStorage.getItem('api_key'),
                'content-type': 'application/json'
            
        ;
        axios.get(`urlLink/$this.props.match.params.slug` , options)
            .then((response) => 
                console.log(response);
            );
    
    render() 
        return <div>
            hi
        </div>