Routing with React Router

React Router (https://reacttraining.com/react-router/web/guides/philosophy) is used for client-side routing. The default setup with JHipster is to use Hash History-based routing. It provides a 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.

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

const Routes = () => (
  <div className="view-routes">
    <Route exact path="/" component={Home} />
    <Route path="/login" component={Login} />
    <Route path="/logout" component={Logout} />
    <Route path="/register" component={Register} />
    <Route path="/activate/:key?" component={Activate} />
    <Route path="/reset/request" component={PasswordResetInit} />
    <Route path="/reset/finish/:key?" component={PasswordResetFinish} />
    <PrivateRoute path="/admin" component={Admin} />
    <PrivateRoute path="/account" component={Account} />
    <Route path="**" component={Entities} />
  </div>
);

export default Routes;