Routing with React - not v6 compatible (yet)

One of the most useful attributes of React is the ability to navigate between multiple pages or views is a fundamental element of any website. Routing in React allows us to create and navigate between different routes in our application adds even more functionality to your React apps. The routing protocol within React's routing library makes the process much more streamlined than it is with vanilla JavaScript.

React Router

React Router is a third-party library that provides routing functionality in React applications. It is the most popular routing library for React and is widely used in production applications.

This tutorial is assuming that you already have a react app created, if not: create a new app before starting any of the below instructions.

File Structures

Assuming there's already a src folder, inside of that create a file for each of the routes you'll need, a header file, and your App.js.

Routes

In this example our routes will be Home, About, and Contact.

A framework for each of those files should follow the example below:

import React from "react";

function Home() {
  return (
    <h1>Home Page</h1>;
    //anything else you think should go in this component
  );
}
export default Home;

Header

Next we focus on a Header file. Create Header.js in the src folder and we will create a navigation bar to make a user-friendly way to navigate between pages in your application. _

We import Link from "react-router-dom" and React from "react". Then, using an unordered list we identify the relative links to all of the pages we have.

import React from "react";
import { Link } from "react-router-dom";

function Header() {
  return (
    <>****
      <header>
        <ul >
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </header>
    </>
  );
}
export default Header;

App.js

Then, we move to the App.js file. This is where we use the router to route to each of the pages we linked in the header.

To define routes in React, we need to import the react-router-dom library's key elements: Switch and Route. Next, we import the Header and each component we are routing to. If there are issues with this part, make sure you exported the functions created in their respective files.

import { Route, Switch } from "react-router-dom";
import Header from './Header'
import Home from './Home';
import About from './About';
import Contact from './Contact';

To use what we've imported, we use the code below to get a functioning router.

function App() {
  return (
    <div className="App">
      <Header />

      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/contact">
          <Contact />
        </Route>
      </Switch>
    </div>
  );
}

export default App;

Index.js

Then, update your index.js to use BrowserRouter:

import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  rootElement
);

Styling

After this we should have a functioning nav-bar. But to make it even better, we should add some css styling. By adding flexbox, each routing link should be inline with each other, which is objectively how any nav-bar should look. In the css file, add the following code:

header ul {
  display: flex;
}

header ul li {
  list-style: none;
  padding: 10px;
}

header li a {
  text-decoration: none;
}

To see the code in Action: check out the code on Code Sandbox

Comments

[Nathaniel Arfin]

Hey, in case you were unaware, <Switch/> is deprecated in v6, it’s been replaced with

[katbruce]

Thanks for the info! I've seen it but was still referencing old stuff based on what I learned in classes. I haven't even finished that unit yet and still old habits die hard. Will edit with v6 updates soon!