React Router (https://reacttraining.com/react-router/web/guides/philosophy) is used for client-side routing. The default setup with JHipster is to use browser history-based routing (HTML5 push state). It provides simple component-based routing, along with a flexible API for advanced routing setups. Routes can be defined anywhere in the application alongside the normal React rendering code. JHipster provides some custom wrappers such as PrivateRoute to enable authorization-based routing and ErrorBoundaryRoute with custom React error boundaries. JHipster also does lazy loading for entities and admin and account screens.

Let's take a look at src/main/webapp/app/routes.tsx:

...
// Lazy loading for account screens
const Account = Loadable({
  loader: () => import(/* webpackChunkName: "account" */ 'app/modules/account'),
  loading: () => <div>loading ...</div>
});
// Lazy loading for admin screens
const Admin = Loadable({
  loader: () => import(/* webpackChunkName: "administration" */ 'app/modules/administration'),
  loading: () => <div>loading ...</div>
});

const Routes = () => (
  <div className="view-routes">
    <Switch>
      <ErrorBoundaryRoute path="/login" component={Login} />
      ...
      <ErrorBoundaryRoute path="/account/reset/finish/:key?"
         component={PasswordResetFinish} />
      <PrivateRoute path="/admin" component={Admin}
         hasAnyAuthorities={[AUTHORITIES.ADMIN]} />
      <PrivateRoute path="/account" component={Account} 
          hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]} />
      <ErrorBoundaryRoute path="/" exact component={Home} />
         <PrivateRoute path="/" component={Entities}
         hasAnyAuthorities={[AUTHORITIES.USER]} />
      <ErrorBoundaryRoute component={PageNotFound} />
    </Switch>
  </div>
);

export default Routes;

The parent routes of our application are defined here; the child routes will be defined in their corresponding modules.