I'm developing an application using React + React-router + Express to render on the server and inject into an EJS view.
It is working correctly, but I noticed that by not finding a route like /naoexiste
the request falls correctly on the React-router and my component PaginaNaoEncontrada
is rendered correctly (client rendering) however, if a request like /naoexiste/
is My component is rendered in the server version (which did not load the bundle and some other things that are loaded into html, such as external styles).
Am I letting something go?
routes.js
export default (
<Route path="/" component={MainPage}>
<IndexRoute component={Pagina}/>
<Route path="pagina" component={Pagina}/>
<Route path='*' component={PaginaNaoEncontrada} />
</Route>
);
App.js
export default class App extends React.Component {
render() {
return (
<Router history={browserHistory}
routes={routes}
onUpdate={()=> window.scrollTo(0,0)}
/>
);
}
}
Server.js (Part of the route control, there are other things but I do not think they will interfere with this issue)
app.get('*', function (req, res) {
(0, _reactRouter.match)({ routes: _routes2.default, location: req.url }, function (err, redirectLocation, renderProps) {
if (err) {
return res.status(500).send(err.message);
}
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathName + redirectLocation.search);
}
var markup = void 0;
if (renderProps) {
markup = (0, _server.renderToString)(_react2.default.createElement(_reactRouter.RouterContext, renderProps));
} else {
markup = (0, _server.renderToString)(_react2.default.createElement(_NotFoundPage2.default, null));
res.status(404);
}
return res.render('index', { markup: markup });
});
});
Versions:
"react": "^15.4.1",
"react-dom": "15.4.1",
"react-router": "^3.0.0",
"ejs": "^2.5.3",
"express": "^4.12.4",