React Routing

Client side navigation allows to navigate between the html pages of the application. In React and generally in SPAs we have a single html page which loads the entire application. However, we usually need to navigate between the different parts of our application and load only a specific part in the screen.

React core library's responsibility is to handle the View part of the application. It is an engine for rendering and updating our UI, but does not provide a built-in mechanism for loading different parts for your application.

The React Router v4 is an engine for handling navigation in React applications. It provides a set of components which can be used to load specific components in specific routes.

React Router consists of a core package react-router, a router for the web react-router-dom and a router for the native react-router-native. For a web application we will install just the react-router-dom.

npm install --save react-router-dom

The Router

React Router v4 has define an interface for the router it exports, the Router interface. For the web we usually use the BrowserRouter or the HashRouter implementation.

The BrowserRouter uses the HTML5 history API to synchronize the UI with the URL.

The HashRouter uses the hash portion of the URL to synchronize the UI with the URL.

Let's say that our server runs at https://example.app.com:

The Routes

To define a new route we can use the Route component that React Router v4 exports. It accepts the path and the component that should render as props.

For example, in our application we want to setup a route to display only the wall screen and another one to display the user settings.

<Route path="/" component={WallScreen}>
<Route path="/user-settings" component={UserSettingsScreen}>

URL parameters can be defined as well. The following route will define a URL get a user's profile:

<Route path="/:user" component={UserProfileScreen}>

Another important component that React Router v4 exports is the Switch, which renders the first child Route that matches the location.

Let's say that we have define the following routes:

<Route path="/" component={WallScreen}>
<Route path="/user-settings" component={UserSettingsScreen}>
<Route path="/:user" component={UserProfileScreen}>

If the URL is /user-settings, then UserSettingsScreen and UserProfileScreen will all render because they match the path. Using Switch we can render only the first one that matches the path.

<Switch>
    <Route path="/user-settings" component={UserSettingsScreen}>
    <Route path="/:user" component={UserProfileScreen}>
    <Route path="/" component={WallScreen}>
</Switch>

Now, if the URL is /user-settings, then only UserSettingsScreen will be rendered.

React Router v4 exports a Link component which can be used to accomplish navigation through the application. We can define as props there to redirect on click and it updates the URL.

<Link to="/user-settings" />

Using traditional anchor links will cause a page reload instead of just updating the URL.

Conclusion

React Router v4 can be used to implement client side routing.

Router has been integrated in the application in the following GitHub Repo

For a deep dive into the full features you can read React Router v4

This is the end of the tutorial.

Share if you liked it!

React Networking React Build Modern Apps