1
I’m developing an application using React + React-router + Express to render to the server and injecting it into an EJS view.
It is working properly, but I noticed that when not finding a route as /naoexiste request falls correctly on React-router and my component PaginaNaoEncontrada is rendered correctly (client rendering), however, if a request like /naoexiste/ is done, my component is rendered in the server version (which has not loaded Bundle and some other things that are loaded into html, such as external styles).
Am I missing something ?
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 don’t think they interfere in 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",
What version of React Router are you using?
– Sergio
@Sergio Editei with the versions
– Lucas Queiroz Ribeiro
I think in the old versions you could do
'*/?', you already tested that?– Sergio
@Sergio had already tried with
*/now I’ve done with*/?but I had the same result :/– Lucas Queiroz Ribeiro
I find it strange that even existing routes happen this, if I declare the route as
planosand typeplanos/– Lucas Queiroz Ribeiro
Put forehead
<Route path='*'outside the component<Route path="/", something like in this example of documentation.– Sergio
@Sergio Fiz and gave the same result, I’m trying to redirect the 404 calls on the server to "/pagina_nao_found" or something like that but nothing done tbm
– Lucas Queiroz Ribeiro
@Sergio, I found out what it was, something really stupid even, by importing the Bundle was not putting the bar, for example :
<script src="bundle.js"></script>instead of<script src="/bundle.js"></script>this caused the server to search the files in the path that was instead of the root :/– Lucas Queiroz Ribeiro