Как получить доступ к параметрам URL в компоненте с состоянием

Question

У меня проблемы с доступом к параметрам url в компоненте с состоянием, который был отрисован с использованием метода рендеринга router-router.Я прочитал, что если я хочу передать реквизиты в компонент с реакции-маршрутизатором, лучший способ - использовать функцию рендеринга.

Вот мой App компонент с Link и Route:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import StatefulComponent from './StatefulComponent.jsx';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: null
    };
  }

  render () {
      return (
        <BrowserRouter>
          <div className="react-root">
            <Link to="/someUrl">I'm a link</Link>
            <Route
              path='/:url'
              render={() => <StatefulComponent value={this.state.value}/>}
            />
          </div>
        </BrowserRouter>
      );
   }
}

ReactDOM.render(<App />, document.getElementById('app'));

Когда пользователь нажимает на Link, someUrl должен быть доступен в StatefulComponent через реквизит.Но я не могу получить доступ к параметрам URL в моем компоненте с состоянием:

import React from 'react';

export default class StatefulComponent extends React.Component {

  constructor(props) {
    super(props);

    console.log('URL PARAMS:', props.match.params);

    this.state = {}
  }

  render () {
    return (
      <div>
        { this.props.value }
      </div>
    )
  }
}

В реквизитах StatefulComponent. match отсутствует свойство *1015*.

Answer 1

Я понял это. При использовании метода рендеринга отact-router вам нужно передать { match } в анонимную функцию, которая передается в метод рендеринга, а затем передать его в компонент, как в обычном пропе. Смотри ниже:

<Route
  path='/:url'
  render={({ match }) => <StatefulComponent match={match} value={this.state.value}/>}
/>