Estou desenvolvendo uma aplicação usando React + React-router + Express para fazer a renderização no servidor e injetando em uma view EJS.
Está funcionando corretamente, porém notei que ao não encontrar uma rota como /naoexiste
a solicitação cai corretamente no React-router e meu componente PaginaNaoEncontrada
é renderizado corretamente (renderização client) porém, se uma requisição como /naoexiste/
é feita, meu componente é renderizado na versão do servidor (a qual não carregou o bundle e algumas outras coisas que são carregados no html, como estilos externos).
Será que estou deixando algo passar ?
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 (Parte do controle de rotas, tem outras coisas mas não creio que interfiram nessa questão)
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 });
});
});
Versões:
"react": "^15.4.1",
"react-dom": "15.4.1",
"react-router": "^3.0.0",
"ejs": "^2.5.3",
"express": "^4.12.4",
'*/?'
, já testaste isso? – Sergio♦ 2/12/16 às 21:18*/
agora fiz com*/?
mas tive o mesmo resultado :/ – Lucas Queiroz Ribeiro 2/12/16 às 21:22<Route path='*'
fora do componente<Route path="/"
, algo como neste exemplo da documentação. – Sergio♦ 2/12/16 às 21:36