react-router-v4 - 如何在路由器外访问 `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 中获取路线参数.理想情况下不使用 redux 存储。

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);