Как получить доступ к `match.params` вне роутера?

Question

Я пытаюсь получить match.params для контейнера моего приложения.

Я пытался использовать withRouter(AppContainer) и match.params всегда будет пустым.

// Routes
import React from 'react';
import { Route, Switch, Router } from 'react-router';
import { createBrowserHistory} from 'history';
import AppContainer from './app-container';
...
<Router history={createBrowserHistory()}>
  <AppContainer>
    <Switch>
      ...
      <Route exact path="/:path1/:path2" component={() => <div>hello</div>} />
      ...
    </Switch>
  </AppContainer>
</Router>

// app-container.js
import React from 'react';
import { withRouter } from 'react-router';
const AppContainer = (props) => {
  const { match } = props;
  console.log(match.params); // This will always be empty
  return <div>whatever</div>;
};
export default withRouter(AppContainer);

Навигациядо /foo/bar.Я ожидаю, что match.params в AppContainer будет { path1: 'foo', path2: 'bar'}, но они всегда {}.

Я думаю, это потому, что AppContainer находится вне маршрутов, в которых есть параметры маршрута, которые меня интересуют.

Итак, мне интересно, есть ли другой способ, которым я мог бы сделать здесь, чтобы я мог получить параметры маршрута внутри AppContainer.В идеале без использования магазина редуксов.

Answer 1

Короче говоря, нет способа использовать match.

Мне кажется, единственный способ сделать это - использовать matchPath.

import { matchPath, withRouter } from 'react-router';

const Test = ({ location }) => {
  /*
  `matchPath` will return `null` if it doesn't match the path format.
  If it matches, it will return some object with parameters put into it
  nicely like `match.params`.
  */
  matchPath(location.search, { path: '/:path1/:path2' });
};
export default withRouter(Test);