Как получить доступ к матчу за пределами маршрута?

Question

Как лучше всего выполнить sh, что я пытаюсь в приведенном ниже коде? Приложение не может получить доступ к match.params для маршрутов, определенных внутри него, но я бы хотел передать части состояния дочерним компонентам на основе параметров url. Я не могу использовать хуки типа useRouteMatch (), потому что App является компонентом класса с состоянием. Я думаю, что я могу сделать это с помощью метода рендеринга Route, но похоже, что документы React Router говорят, что этот метод устарел.

Так есть шаблон проектирования, подобный этому, который позволяет мне сохранять все маршруты logi c в приложении и просто передавать реквизиты дочерним компонентам на основе параметров, которые не используют метод рендеринга Route?

class App extends React.Component {
  state = { things: this.props.things };
  render() {
    return (
      <Switch>
        <Route path='/thing/:thingId'>
          <OneThing thing={this.state.things.find(thing => thing.id === match.params.thingId)} />
        </Route>
        <Route path='/things/:thingTag'>
          <MultipleThings things={this.state.things.filter(thing => thing.tag === match.params.thingTag)} />
        </Route>
      </Switch>
    );
  }
}

Answer 1

с <Route render>

    <Route path='/thing/:thingId' 
        render={(route) => <OneThing thing={route.match.params.thingId}  />} />

с <Route children> ver 5.1

<Route
       path='/thing/:thingId'
      children={({ match }) => (
        <OneThing thing={match.params.thingId}  />
      )}
    />

Answer 2

попробуйте использовать withRouter

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class OneThing extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
export default withRouter(ShowTheLocation);