React JS Routing Explained

Have you come across the term ‘React routing?’ React routing is the today of all modern-day websites. But what is react routing?

React routing

All present-day websites are single page websites which are actually masquerading like multiple pages. They consist of multiple components that will then act like different pages. These Single Page Applications are popularly referred to as SPAs. The routing to the various parts of the same page is done by making use of React Routing.

Depending upon the specific route used in the URL, different components or pseudo-pages are fetched.

Here is how you can use React Routing:

Begin with installation

To install the React routing, use NPM:

npm install react-router-dom

Using the react-router-dom package, you will also need to import BrowserRouter, Route, and Switch. Here is how:-

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

Setting the app

So, any application that you need to use with React first needs to be set up with the React Router. All the features that you need to render in your SPA will be put in the <BrowserRouter> element.

Hence, begin by wrapping your app in it. <BrowserRouter> element or component will do all the logic that helps display the various components that will be added into your app.

The code can be:

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

Open and close tags

Now, you will need to add the Switch element in your app. It contains the opening and closing tags. Using this element eradicates the issue that might lead to the rendering of several components. But this helps to render only a single component. You can also add another shortcode statement that deals with showing an error message if a wrong URL is generated.

function App() {
    return (
        <main>
            <Switch>
            </Switch>
        </main>
    )
}

Error code:

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

Now add the Route tags

<Route path='/' component={Home} />

You will here just need to add the name of the component you will want to redirect to by using the component attribute and a path attribute. Here ‘home’ is the component. The <Route> tags are placed in the <Switch> tags.

Exact tag

The exact tag is an easy solution to deal with the issues when the ‘/’ component might redirect to any of the URL components that deal with ‘/’ and not lead to the specific route asked. As all URLs with just ‘/’ are for the home page, the exact tag helps redirect to specifically only the HOME page component of an URL.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </main>
    )
}

Here is an example of a website with just two added components of About and Contact additional to the original URL Home page.

Add the components

All you need to do now is add the components to the app. It is always advisable to keep your components in separate folders for “components” so as to keep the original codes mess-free, easily readable, and accessible.

Here is an example:

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

Adding clickable links

To make your site accessible by using clickable links and not just typing in the URL manually, use a code to set up a Navbar for navigation and use the Link component. Here, add the components to the app.

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/contact">Contact Now </Link>
    </div>
  );
};

Your simple SPA is ready using React Routing!

Other useful articles: