Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to migrate server side rendering logic to react router 4 ? (Redux)

See original GitHub issue

I am trying to migrate my server side rendering logic to react router 4.But it seems like there many properties are missing like renderProps.

server.js with Old react-router

app.get('/*', (req, res,next) => {
   
    // Server Side Rendering Starts
    match({routes:routes(),location:req.url},(err,redirectLocation,renderProps) => {
        if (err) return next(err);


        if (redirectLocation) {
            return res.redirect(302, redirectLocation.pathname + redirectLocation.search)
        }

        if (!renderProps) {
            return next(new Error('Missing render props'))
        }

        const components = renderProps.components

        const Comp = components[components.length - 1].WrappedComponent;

        const fetchData = (Comp && Comp.fetchData) || (() => Promise.resolve())

        const initialState = {}

        const store = createStore(reducer, initialState, applyMiddleware(thunk));


        const { location, params, history } = renderProps

        fetchData({ store, location, params, history }).then(() => {
            const body = renderToString(
                <Provider store={store}>
                    <RouterContext {...renderProps} />
                </Provider>
            )

            const state = store.getState();
            // console.log(state)


            let head = Helmet.rewind();

            res.send(`<!DOCTYPE html>
          <html>
            <head>
               ${head.title}
                ${head.meta}
                ${head.link}
            </head>
            <body>
              <div id="app" >${body}</div>
              <script>window.__STATE__=${JSON.stringify(state)}</script>

              <script src="/bundle.js"></script>
            </body>
          </html>`)
        })
            .catch((err) => next(err))



    })
});

NewServer.js

    app.get('*',(req,res) => {
    
        // res.sendFile(path.join(__dirname,'./index.html'));
        const routerContext = {};
    
        const components = (
            <StaticRouter location={req.url} context={routerContext}>
                <Provider store={store}>
                    <CoolApp/>
                </Provider>
            </StaticRouter>
        )
    
//I don't Knnow
   
    
    
    });

I don’t know how to proceed without renderPorps

This is my Sample Component

import React,{Component} from 'react';
import {Helmet} from 'react-helmet';
import {connect} from 'react-redux';
import * as allPosts from '../Redux/Actions/AllPosts_action'


class Home extends Component{

    renderAllPosts(){
        const {posts} = this.props;

        return(
            posts.postArr.map(({id,title,body}) => {
                return <li key={id}>{title}</li>
            })
        )
    }
    render(){
        console.log(this.props);

        return(
            <div>
                <Helmet>
                    <meta charSet="utf-8" />
                    <title>My Title</title>
                    <link  rel="stylesheet" type="text/css" href="/static/css/Home.css" />
                </Helmet>
                {this.renderAllPosts()}
            </div>
        )
    }
}
Home.fetchData = ({store,location, params, history}) => store.dispatch(allPosts.getAllPosts());

const mapStateToProps = (state) => {
  return{
      posts:state.allPosts.toJS()
  }
};

const mapDispatchToProps = (dispatch) => {
    return {
        getAllPosts:() => dispatch(allPosts.getAllPosts())
    }
};



export default connect(mapStateToProps,mapDispatchToProps)(Home)