THE 5-MINUTE GUIDE TO UNDERSTANDING REACT ROUTER

“React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.”

What is React Router?

React Router is a library that allows you to handle routes in a web app, using dynamic routing. Dynamic routing takes place as the app is rendering on your machine, unlike the old routing architecture where the routing is handled in a configuration outside of a running app. React Router implements a component-based approach to routing. It provides different routing components according to the needs of the application and platform.

Client and Server Side

When talking about routing and React Router, we can’t forget to mention to client-side and server-side. Client-side is the browser. Its processing happens on the local machine – like rendering a user interface in React. Server-side is where the information is processed and then sent through to a browser.

Server-side means that the action takes place on a web server. Most JavaScript can be done without access to a web server. Client-side means that the JavaScript code is run on the client machine or the browser when we’re talking about web applications. Server-side JavaScript means that the code is run on the server which is serving web pages.

Single-Page Applications (SPA)

Single page applications dynamically rewrite the web page with new data from the server, instead of the default method of the browser loading entirely new pages. When – you – the user, clicks a link, you don’t go to an entirely new page. Instead, the new context loads inline on the same page you’re already on – so only the necessary components of the page render.

Similarity To Native. Single page applications can make the website seem more like a native app. A lot of web pages are written as single page applications where each component renders independently.

React Router’s Role. Single page applications are where React Routing comes into play. When people use a website, there are some things they expect to work – like the back button on the browser, or the URL signifies the view they are currently looking at. This can get complicated for the developer to build in Single Page applications – there’s a “deep link” problem. Some piece of information on a Single Page app may be buried deep underneath many components, so how does the developer make sure the correct URL showing that component displays in the address bar? Through routing – which is why we’re learning about React Router. React Router is a JavaScript library that provides routing capabilities to single page applications built in React.

Conceptual steps to building a single page app:

• Main parent component
• Initial Frame: static (app frame)
  • Could be one invisible HTML element that acts as a container for all the web pages content, or could be a header, or title.
  • In the Dogs SPA graphic above – the two components on the left showing “Contact” and “Care 101” stay the same in both views of the SPA. The center section renders with a picture of Ms. Maisel when that link is clicked.
• React Router defines a Routing Region
  • Navigation links
  • Container to load content into – in our picto graphic above – the center region where the picture of Ms. Maisel shows up.
• Component provides the foundation for the navigation, browser history handling, so users can use the backward & forward buttons.

Dynamic routing

There is a guide’s purpose is to explain the mental model to have when using React Router. It is called “Dynamic Routing”.

Dynamic routing means that routing takes place as app is rendering, not in a configuration or convention outside of a running app. That means almost everything is a component in React Router. Here’s a 60 second review of the API to see how it works:

First, grab yourself a Router component for the environment you’re targeting and render it at the top of your app.

// react-native
import { NativeRouter } from "react-router-native";

// react-dom (what we'll use here)
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  el
);

Next, grab the link component to link to a new location:

const App = () => (
  <div>
    <nav>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
  </div>
);

Finally, render a Route to show some UI when the user visits /dashboard.

const App = () => (
  <div>
    <nav>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
    <div>
      <Route path="/dashboard" component={Dashboard} />
    </div>
  </div>
);

The Route will render <Dashboard {...props}/> where props are some router specific things that look like { match, location, history }. If the user is not at /dashboard then the Route will render null. That’s pretty much all there is to it.

Benefit of React Router

• Add routing to different views/components on Single Page Applications
• Composable
• Easily add links after designing the webpage
• React Router conditionally renders certain components depending on the route from the URL.

ICTS is a Vietnam-based software development boutique that focuses on cutting-edge technologies. We provide services mobile app development, using React Native for mobile apps such as Tachyon Wallet, see more products in our portfolio!

Contact us and discover what benefits we can bring to the mobile app development project in terms of quality and budget with React Native.

*Reference:

1. https://www.educative.io/blog/react-router-tutorial
2. https://reactrouter.com/web/guides/philosophy
3. https://www.codementor.io/@hooriaishtiaq/react-routers-pbhek7xxa