Conditional modal with React Router

Question

I would like to know how to implement a route with React Router that either opens as a modal or a full page.

Given a list of items, when users click on an item, I would like to open a modal. However, when users visit the item's url directly, I would like to render a full page.

An example of this behavior can be seen on https://producthunt.com/.

When users visits a url for an item from the main page, the page is shown as a modal. However, when users go directly to the item's url, it's a full page.

I am doing server side rendering. Any ideas on where to begin?

Edit

If anyone is solving a similar problem, see this official example: https://github.com/reactjs/react-router/tree/master/examples/pinterest

Answer 1

You can use component live cycle method componentWillReceiveProps to find out if router has locationBeforeTransitions prop set to some value.

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

  // transition display should render modal
}

Best practice is to use wrapper for this decision and do not overcomplicate components by giving them knowledge of the router props.

I am using it this way and it works.

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