Использовать params в реагировать Link и получить его значение в другом компоненте?

Question

Вопрос может показаться запутанным, но вот что я имею в виду, у меня есть два компонента, которые никоим образом не связаны, они не являются родительскими или дочерними по отношению друг к другу, это первый компонент:

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>

Так что в основном то, что я пытаюсь сделать это получить этот слаг в первом компоненте и добавить его в конец url в моем вызове api, но я не знаю, как это сделать, так есть ли способ получить этот слаг param и добавить до конца этого api вызова?

Answer 1

Предполагая, что ваш компонент FetchRandomUser2 является вашим компонентом Api, и вы просто добавили его в список при импорте, вы хотите передать его в маршрут следующим образом:

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

Это означает, что когда он рендеринг, он получит все соответствующие реквизиты маршрутизации, такие как совпадение, местоположение и история.

Это означает, что внутри вашего компонента Api вы можете получить слаг, выполнив что-то вроде this.props.match.params.slug, а затем используя это в вашем запросе как urlLink/${this.props.match.params.slug}

Answer 2

Вы можете получить доступ к параметру :slug вашего URL, перейдя к match реквизиту, который вам дает ReactRouter.

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