What Is React-Routing

React routing is a way to navigate or route between different pages, or you can route between URLs. As the name suggests, this routing is used in React. React routing isn't a "React" package build-in recourse. To access them, you need to install react-router-dom.

Types Of Routing Systems

BrowserRouter

Browser routing is the most popular way to navigate between pages. Essentially, browser routing gets your routes and when activating that route, the browser will change to the page that it has been assigned to and in doing so the URL will navigate to that page URL. E.g I press an "About" button and it navigates to the About page, the URL will then change to, "localhost/about".

HashRouter

Hash routing basically applies the BrowserRouter rule but this time adding a hash to the URL. E.g I press an "About" button and it navigates to the About page, the URL will then change to, "localhost/#/about".

Memory Router

As the name suggests, memory routing independently routes to pages without changing the URL. The URLs that are changing simply gets stored inside of the memory and no-where else. E.g., if I press an "About" button and it navigates to the About page, the URL will not change at all but the page will still navigate to display the About page info

StaticRouter

Static routing is a router that only navigates to a certain page and cannot be displaying another pages info. E.g., if I press an "About" button and it navigates to the About page, but I have only set the static router to show the Home page, then the About page info will not be displayed

Using React-Router

Setup

The first step is to create a react application and clean up all the unnecessary pages. The next step that you are going to want to do is install the "react-router-dom" package by opening up the command prompt and writing npm install react-router-dom. The last step is to add a new folder in your app and name it components, then add two files. Name one, home and the second, about. Afterwards, your project should look like this:

Now that you have completed that, you are finished with the setup code.

Navigating Between Pages

Inside the index.js file, we need to import BrowserRouter from react-router-dom.

import { BrowserRouter } from 'react-router-dom';
<BrowserRouter >
 <React.StrictMode>
    <App />
  </React.StrictMode>
</BrowserRouter>

Once you import it, wrap the browser router around the React.StrictMode. After doing this, add functions to each of your files (home, about) like this:

function Home() {
    return (
    <div>
        Home
    </div>
    )
}

export default Home;

function About() {
    return (
    <div>
        About
    </div>
    )
}

export default About;

For the next step, go into App.js and import the following; Link, route, and routes from react-router-dom. Then, you are going to add a Routes tag, and inside that stage, create two route tags:

<Routes>
        <Route path='/home' Component={Home} />
        <Route path='/about' Component={About} />
</Routes>

Inside the route, make sure to add a path for the directory of the route and component to render, as you can see. Aboce this code add two Links;

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

      <Routes>
        <Route path='/home' Component={Home} />
        <Route path='/about' Component={About} />
      </Routes>
    </>

Add, "to", to a link to specify its URL to direct to and that is the final code.

If you run the code, you will see that in the browser, you will have two links and everytime you press one of them, the URL changes to the path, that you specified also showing the information displayed in the files.

This method is the most used method as it is quick, easy and effective. If you want, you can play around with the suggested navigation methods listed and have a go at all of them.

Outcomes

In this tutorial, you should have learned some different ways to navigate between pages in React, learn the most effective way to navigate and use it in a browser situation and the pros and cons of certain navigation types.

React Routing

All Basics You Need To Know