带有React Router的条件模态

Question

我想知道如何使用React Router实现路由，该路由可以打开为模态页面或整页。

给定一个项目列表，当用户点击某个项目时，我想打开一个模态。 但是，当用户直接访问该项目的网址时，我想渲染整页。

可以在https://producthunt.com/上看到此行为的一个示例。

当用户从主页面访问某个项目的网址时，该网页会显示为模式。但是，当用户直接访问该项目的网址时，它就是一整页。

我在做服务器端渲染。关于从哪里开始的任何想法？

修改

如果有人正在解决类似问题，请参阅此官方示例：https://github.com/reactjs/react-router/tree/master/examples/pinterest

Answer 1

您可以使用组件实时循环方法componentWillReceiveProps来查明路由器是否将locationBeforeTransitions prop设置为某个值。

componentWillReceiveProps() {
  if (this.props.router.locationBeforeTransitions === null) {
    // initial display should render page
  }

  // transition display should render modal
}

最佳做法是使用包装器来做出这个决定，并且不要让组件知道路由器道具，从而使组件过于复杂。

我这样使用它并且它有效。

"react-router": "^2.3.0",
"react-router-redux": "^4.0.2",