ElMent ElMent - 1 year ago 128
Node.js Question

React-router on server always renders root route

I've already spent half a day on this issue and can't find what is wrong. I use react-router on server. But for every route, it renders the same component (the one from root route).

Here is my server:

import routes from "../shared/routes";
app.get('*', (request, response) => {
match({ routes: routes, location: request.url }, (err, redirect, props) => {
if (err) {
} else if (redirect) {
response.status(302).redirect(redirect.pathname + redirect.search)
} else if (props) {
console.log('Rendering '+JSON.stringify(props));
const appHtml = ReactDOMServer.renderToString(<RouterContext {...props}/>);
response.render('app', {app: appHtml});
} else {
response.status(404).send('Not Found')

Here is my routes:

export default (
<Route component={AppHandler} path="/">
<IndexRoute component={AppHandler}/>
<Route component={AboutHandler} path="about" />

Other observations:

  • It correctly distinguish non-existing routes, eg. when I type
    /blahblah in browser I got 404

  • When I put AboutHandler as the
    component for root route, It is correctyl displayed

  • I also tried "/about" as route path instead of only "about"

  • Here is what I get in props


AppHandler and AboutHandler are built using webpack. They are imported like:

import AppHandler from '../../build/app';
import AboutHandler from '../../build/about';

Here are relevant parts of both files:


var App = function (_Component) {
_inherits(App, _Component);

function App() {
_classCallCheck(this, App);

return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));

_createClass(App, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'App root'

return App;

exports.default = App;

And about.js:

var About = function (_Component) {
_inherits(About, _Component);

function About() {
_classCallCheck(this, About);

return _possibleConstructorReturn(this, (About.__proto__ || Object.getPrototypeOf(About)).apply(this, arguments));

_createClass(About, [{
key: 'render',
value: function render() {
return _react2.default.createElement(

return About;

exports.default = About;

Answer Source

I misundrestood nested routes in react-router and missed {this.props.children} in AppHandler.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download