Carl von Buelow Carl von Buelow - 2 months ago 26
React JSX Question

Catch "Warning: [react-router] Location '/foo-bar' did not match any routes" and do a full page reload if it is thrown

I have a hybrid react/angularjs app. When routing to routes that don't exist in react I need to do a full page reload so the server can return the angular pages. I see the error being thrown

Warning: [react-router] Location '/foo-bar' did not match any routes
. How can I intercept that and do a full page reload when it happens?

Answer

Figured it out...

const reloadPage = (nextState, replace, callback) => {
  callback("Route not found");
  window.location.reload();
};

const routes = (
  <Route path="/" component={Chrome}>
    <IndexRoute component={Home}/>
    <Route path="catagory" component={CategoryPage}/>
    <Route path="*" onEnter={reloadPage}/>
  </Route>
);

try {
  ReactDOM.render((
      <Router history={browserHistory}>{routes}</Router>
    ),
    rootEl
  );
} catch (err) {
  if (err !== "Route not found") {
    throw err;
  }
}