revathskumar / react-server-render

React Server side rendering demo
http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/
MIT License
155 stars 43 forks source link

How to pass URL params to static fetchData component method? #3

Open si-harps opened 7 years ago

si-harps commented 7 years ago

I'm keen to understand best practices for passing url params from the express route handler to the component being rendered server side. Currently, it looks as though the only way the is achievable is by using custom express routes when required or a hacky url split inside the static component method.

eg.

GET http://www.myapp.com/posts/:id (req.params.id required to load post 10 from external endpoint)

import { getPost } from './actions/post'

...

static fetchData(store) {
    // param 10 required from request url
    return store.dispatch(getPost(:id))
}

Any thoughts on this?

si-harps commented 7 years ago

For anyone experiencing the same issue see below for the fix...

In routes/index.js see the line...

const promises = branch.map(({route}) => {
...
})

Each route being mapped will also contain a 'match' property. This property contains the url params as defined in the router. So if the match route is http://www.myurl.com/posts/:id, match.params.id will be the value of :id. So in full...

const branch = matchRoutes(routes, req.url);
const promises = branch.map(({ route, match }) => {

    let fetchData = route.component.fetchData

    return fetchData instanceof Function 
        ? fetchData(store, match) 
        : Promise.resolve(null)
})

...the static fetchData method on the component might look like this...

static fetchData(store, props) {
    return store.dispatch(getPost(props.params.id));
}