Upgrade to React Router 4

[nreoch25]

Are there any plans to upgrade react-router to version 4? It would be interesting to hear if/how you guys plan on tackling that.

[ebukahills]

I really need this. react-router v4 really brought a lot of changes.

[infacq]

Good luck for new comer

[Nicholson85]

+1

If this projects gets too dated it could discourage people from using this stack.

[Spisaczek]

Anyone did it on his own? Can you give some advice how to migrate mern project to react-router v4?

[therladbsgh]

Well, to preface I don't have much experience with using React Router. But looking at the v4 docs, I managed to make a basic working version:

/server/server.js

import routes from '../client/routes'; 

...

// Server Side Rendering based on routes matched by React-router.
const reduxProvider = React.createFactory(Provider);
app.use((req, res, next) => {
  const context = {};
  const store = configureStore();
  const initialView = renderToString(
    reduxProvider(
      { store },
      <StaticRouter
        location={req.url}
        context={context}
      >
        <Provider store={store}>
          <IntlWrapper>
            {routes}
          </IntlWrapper>
        </Provider>
      </StaticRouter>
    )
  );
  const finalState = store.getState();

  if (context.url) {
    res.redirect(302, context.url);
  } else {
    res.set('Content-Type', 'text/html')
       .status(200)
       .end(renderFullPage(initialView, finalState));
  }
  return next();
});

/client/App.js

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// Import Routes
import routes from './routes';

export default function App(props) {
  return (
    <Provider store={props.store}>
      <IntlWrapper>
        <Router history={history}>
          {routes}
        </Router>
      </IntlWrapper>
    </Provider>
  );
}

/client/routes.js

export default (
  <Route path="/" component={App} />
);

/client/modules/App/App.js

import { Switch, Route } from 'react-router';

...

<div className={styles.container}>
  <Switch>
    <Route
      exact path="/"
      component={require("your-page-link-here").default}
    />
    <Route
      path="/home"
      component={require("your-page-link-here").default}
      }}
    />
    <Route path="*" component={require('default-switch-case').default} />
  </Switch>
</div>

Caveats:

• React router v4 got rid of getComponent; I replaced it with component, which works but doesn't have code splitting. I've been experimenting with react-loadable but am running into issues.
• Routes are located in /client/App/App.js instead of /client/routes.js, as routes cannot have children anymore in v4.

[Ballpin]

I have been working on a new mern stack based on this one and react-universally. After i ran into same issue as you guys.

With react 15 and react-router 4 its working well. But with react 16 i ran into some issues with tests because react-addons-test-utils has been decapitated. If you wanna try my repo you can click at the link below.

Link to the repo https://github.com/Ballpin/mern-starter2

[nreoch25]

I decided to create a very simple updated version of this stack. Tech used is React 16, React-router-4, Webpack3, Redux, Redux-saga, code Splitting with Loadable-components, HMR, SSR.

I've kept everything very simple so people new to any of these technologies shouldn't have a problem understanding what's going on.

Please let me know in the issues at the below repo if you're having any problems running this and please share.

https://github.com/nreoch25/mern-boilerplate

[mannyhenri]

This has been officially moved to V2.8.0 and will be taken care of soon (working on V2.5)

[shanhuiyang]

Hi @nreoch25 ,

Since this project is deprecated, I started a new MERN project in Typescript. https://github.com/shanhuiyang/TypeScript-MERN-Starter I think the new MERN project can fulfil your requirement. It is featured by:

• RESTful-style, powered by an embedded oauth2 server and passport.js, this project separate client and server clearly.
• React-router 4.0, with it you can easily define client routes and manage them.
• Redux, with it you can easily manage client states.
• Almost ready for a community app. We modelled User as well as Article. This is a real starter for who would like to build an community app on MERN.
• The client code is created from create-react-app, so now you can get rid of annoying configurations for babel and webpack.

The project is still under construction but it already works well now. Please have a try, issues and feedbacks are welcome.