A new article and I want to take a little break from the whole Web3 and blockchain ruckus. In this article, I want us to look at how SPAs(Single Page Applications) are routed to go from one page to another and update a particular section while others change.

Prerequisites

Intermediate knowledge of JavaScript and the React library is needed for this lesson.

What is React-Router?

In react, React Router is a standard library for routing. It allows users to navigate between views of different components in a React application, change the browser URL, and keep the UI in sync with the URL. Let's make a simple React application to learn how the React Router works. The app will have three parts: a home component, an about component, and a contact component. To move between these components, we'll utilize React Router.

Installing React-Router

Create a new react application as you would normally do, if you're new to React, refer to these steps to create a react app, create a react app. cd into your project directory and install React Router with the following command

npm install --save react-router-dom

After installing React Router, we need to set it up in our app. In the index.js file, we need to wrap our entire <App /> component in the BrowserRouter component provided by React Router. As a convention, we import the BrowserRouter as Router from 'react-router-dom'.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter as Router } from 'react-router-dom'

import './index.css'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
)

Then we need to add our routes in the App.js file. We will import Routes and Route also from 'react-router-dom' and set it up.

import React, { useState } from 'react'
import { Routes, Route } from 'react-router-dom'

const App = () => {
  return (
<Routes>
      <Route path='' element={} />
      <Route path='' element={} />
      <Route path='' element={} />
    </Routes>
  )
}

export default App

I am going to assume we already have our components ready to be imported. Next, we need to import our components into App.js and add the paths and elements.

import React, { useState } from 'react'
import { Routes, Route } from 'react-router-dom'

import { Home, About, Contact } from './pages'

const App = () => {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route path='/contact' element={<Contact />} />
    </Routes>
  )
}

export default App

Now need a way to navigate the routes, we will add a simple navbar component to the mix. We will need to import Link from 'react-router-dom'. This component acts as the hyperlink tag for us to move around the pages.

import React, { useState } from 'react'
import { Routes, Route, Link } from 'react-router-dom'

import { Home, About, Contact } from './pages'

const App = () => {
  return (
    <div>
      <ul>
         <li> <Link to='/'>Home</Link> </li>
         <li> <Link to='/about'>About</Link> </li>
         <li> <Link to='/contact'>Contact</Link> </li>
      </ul>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
      </Routes>
    </div>
  )
}

export default App

And that's it, we have created simple navigation for our pages. We can now switch between the pages. If you need more pages, all you need to do is add a new <Route /> component, and add the path and element. We could go a little further and add a '404' page just in case the user made a mistake in the URL.

import React, { useState } from 'react'
import { Routes, Route, Link } from 'react-router-dom'

import { Home, About, Contact, NotFound } from './pages'

const App = () => {
  return (
    <div>
      <ul>
         <li> <Link to='/'>Home</Link> </li>
         <li> <Link to='/about'>About</Link> </li>
         <li> <Link to='/contact'>Contact</Link> </li>
      </ul>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/*' element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

The asterisk, *, indicates everything else that is not defined in the routes. And if the user tries to access a route that is not defined, they will be automatically redirected to the '404' page.

Conclusion

We have learned about routing and React Router, and how to use the BrowserRouter, Routes, Route, and Link components. This can be used for a large application. There are still some aspects of routing that we didn't cover in this tutorial, which includes dynamic routing and redirection, but we will discuss them in upcoming articles.

If you enjoyed this article, make sure to follow me for more lessons on Web Development. To learn more about React Router, read the docs here