Reactjs 在react链接中使用参数并在另一个组件中获取其值？

这个问题听起来可能让人困惑，但我的意思是， 我有两个部分没有任何关联，它们基本上不是父母或孩子， 这是第一个组成部分：

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>
    }
}

从“React”导入React；
从'react router dom'导入{Link}；
类测试扩展了React.Component{
render（）{
const slug=“纽约”
返回(
城市
);
};
}
导出默认测试；

这是我的第二部分：

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>
    }
}

从“React”导入React；
从“axios”导入axios；
导出默认类Api扩展React.Component{
componentDidMount（）{
常量选项={
标题：{
“授权”：localStorage.getItem（'api_key'），
“内容类型”：“应用程序/json”
}
};
获取（'urlink/Slug'，选项）
。然后（（响应）=>{
控制台日志（响应）；
});
}
render（）{
回来
你好
}
}

第二部分的路线是这样的

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

---

所以基本上我想做的是在第一个组件中得到这个slug，然后将它添加到我的

api

调用中

url

的末尾，但我不知道怎么做，那么，有没有办法获取slug

param

并将其添加到

api

调用的末尾？

假设您的FetchRandomUser2组件是您的api组件，并且您只是在导入时对其加了别名，您希望将其传递到如下路径：

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

---

这意味着在您的Api组件内部，您可以通过执行类似于

This.props.match.params.slug

的操作来获取slug，然后在您的请求中使用它，例如

urlink/${This.props.match.params.slug}

，假设您的FetchRandomUser2组件是您的Api组件，并且您在导入时使用了别名，你想把它传给这样的路线：

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

---

这意味着在Api组件内部，您可以通过执行类似于

This.props.match.params.slug的操作来获取slug，然后在请求中使用它，例如
urlink/${This.props.match.params.slug}
您可以通过访问ReactRouter提供的
匹配属性来访问URL的
：slug
参数

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



从“React”导入React；
从“axios”导入axios；
导出默认类Api扩展React.Component{
componentDidMount（）{
常量选项={
标题：{
“授权”：localStorage.getItem（'api_key'），
“内容类型”：“应用程序/json”
}
};
get（`urlink/${this.props.match.params.slug}`，选项）
。然后（（响应）=>{
控制台日志（响应）；
});
}
render（）{
回来
你好
}
}
您可以通过访问ReactRouter提供给您的
match
道具来访问URL的
：slug
参数

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



从“React”导入React；
从“axios”导入axios；
导出默认类Api扩展React.Component{
componentDidMount（）{
常量选项={
标题：{
“授权”：localStorage.getItem（'api_key'），
“内容类型”：“应用程序/json”
}
};
get（`urlink/${this.props.match.params.slug}`，选项）
。然后（（响应）=>{
控制台日志（响应）；
});
}
render（）{
回来
你好
}
}