Question

使用 withRouter（）时，如何获取路由上下文，位置，参数等？

import { withRouter } from 'react-router';

const SomeComponent = ({location, route, params}) => (
    <h1>The current location is {location.pathname}</h1>
);

const ComposedWithRouter = withRouter(SomeComponent);

您可以使用withRouter获取该信息，还是必须在组件树中明确传递这些信息？

Answer 1

所以，不再使用context了。这些都在道具中提供：

SomeComponent.propTypes = {
  location: React.PropTypes.shape({
    pathname: React.PropTypes.string,
    query: React.PropTypes.shape({
      ...
    })
  }),
  params: React.PropTypes.shape({
    ...
  }),
  router: React.PropTypes.object
}

const ComposedWithRouter = withRouter(SomeComponent);

然后，让我们在SomeComponent中说您希望将用户发送到新路线，您只需执行this.props.router.push('someRoute')

Answer 2

通过withRouter获取位置等已添加到react-router版本2.7中。 Dan Abramov建议升级到3.0以使用withRouter。在2.7之前，它只提供了一组功能。

使用带路由器的React路由器

2 个答案: