React-router not rendering pages not found correctly

1

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",
    
asked by anonymous 02.12.2016 / 18:05

1 answer

0

I was able to find where the error was.

TL; DR

  

When importing the bundle.js that contained the client logic was not   using /bundle.js and yes bundle.js

So, even though the server pre-rendered the correct page, the request to retrieve that bundle failed because it tried to fetch the current address instead of the root.

Exemplifying:

When calling http://localhost:3000/como_funciona the server returned the correct component and the request for the bundle happened from the root " /bundle.js ", however, when calling http://localhost:3000/como_funciona/ the server rendered the correct page, but the call to the bundle happened at address http://localhost:3000/como_funciona/bundle.js so it was not found.

An addendum that I also noticed, is that this happens when using <Link to="pagina" /> instead of <Link to"/pagina" /> if it is in the root it will go quiet, otherwise it will concatenate with the current address.

    
03.12.2016 / 00:06