A simple introduction to react router

#javascript #react #webdev #programming

React router is a library built on top of react, which is used to navigate multiple routes in single-paged applications. Thus, it allows the user to move to different components without having to refresh the app, reducing the loading time, which improves the user experience.

What’s the need for the react router?

Traditionally, when a user clicked a link to a new web page, the new data from the server would rewrite the entire web page and force the site to refresh, which renders a whole different page. These types of apps are known as multi-page apps. Besides causing the pages to refresh, which takes some time, the users will see the pages redraw on the browser, which is not a good user experience and also it makes it hard to manage the app state.

What’s the solution?

The solution is changing from multi-page apps to single-page apps. In this rendering technique, you will never have to navigate to a whole new web page completely. Instead, the different components (known as views) will be loaded on the same page dynamically without navigating to an entirely new web page. This concept of single-page apps is used in popular web apps such as Facebook, Twitter, Instagram, etc.

To achieve all that, you will require the react-router library

React router components

The react-router library has three major components, namely;
• Routers
• Route matchers
• Navigation links

Routers

React router has two main routing components, namely, HashRouter and BrowseRrouter. These components define the routing region where you can use the navigation links and route matchers.

• Browserouter is used in dynamic webpages that use databases and whose information changes frequently. This routing technique makes the use of HTML history API to store and access the locations visited by the user

• Hashrouter, on the other hand, is used to route static web pages. The current location is stored on the hash portion of the URL. Thus the URL looks like this; http://example.com#/about. However, the # is never sent to
the server. Hence it has no special meaning.

Navigation links

React router provides <Link> tags that are used to create and change links. It is used in the place anchor tag (<a>) in HTML. Navigation links receive the to attribute whose value specifies the URL.
Syntax;

<Link to="/about">About</Link>

<NavLink>, which is also a navigation link in react-router, is a special type of <Link> component that is used to add styles when the current location matches with the route. This tag automatically inherits the active class when visited. The styles of the active class must be defined in the stylesheet.

<NavLink to="/about">About</NavLink>

Router matchers

Router matchers help determine the components to be displayed when a certain URL is visited. The two main route matching components are <Route> and <Switch>
• <Route> helps determine the connection between the URL specified on the tag and the component displayed on the user interface. It has a path attribute that specifies the pathname to the component
• <Switch> finds through its children a path that matches the requested URL and ignores others when it sees one.

 <div className="content">
          <Switch>
            <Route path="/about"> <About /></Route>
            <Route path="/contact"><Contact /></Route>
            <Route exact path="/"><Home /></Route>
          </Switch>
  </div>

Final remarks

That was a simple introduction to the basics of react router. However, one good habit of a software developer is practicing and getting their hands dirty. Thus, it will be wise of you also to check this simple hands-on guide with react router.