paypal / react-engine

a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views
Apache License 2.0
1.45k stars 130 forks source link

URL's with a query string do not render correctly server side using React Router. #143

Closed JustinMGaiam closed 8 years ago

JustinMGaiam commented 8 years ago

When we attempt to render a url with a query string e.g. /example?test=123 on the server side the location is changed to /example before it gets to React Router and we get the wrong component. This is an issue since we render a different component based on the query string value i.e. /example would render ComponentExample and /example?test=123 would render ComponentQueryExample. We are using React Engine version 3.0.0, React Router 1.0.3, Express 4.13.3 and the issue seems to be corrected if I comment out line 35 in react-engine/lib/expressView.js without any immediate side effects. Is there an option I am missing in React Engine to preserve query strings that would fix this issue differently? I am not finding anything in the document that talks about query string or in the code either.

The code example below is a React Router route which represents my example using code.

{
  path: '/example',
  getComponent: (location, cb) => {
    const ComponentExample = require('components/ComponentExample')
    const ComponentQueryExample = require('components/ComponentQueryExample')
    cb(null, (props) => {
      const query = props.location.query
      if (query.fullplayer == 123) {
        return (<ComponentQueryExample {...props} />)
      }
      return (<ComponentQueryExample {...props} />)
    })
  }
}

Here is an example express route.

app.use('/', (req, res) => {
  app.engine('.jsx', engine)
  return res.render(req.originalUrl, {
    hydrate: {}
  })
})
JustinMGaiam commented 8 years ago

I have figured out that the answer to this question existed in a closed issue and was fixed in 3.1.0. I have submitted a PR with the fix back ported to 3.0.0 from 3.1.0.