Figuring out React Router

Routing — in terms of a web application or site — is the ability to navigate around different parts of the application.

You'll notice on many sites where you can log in that the URL for that part of the site typically ends with /login. The same goes for parts of the site where you can sign up. It usually ends with /sign-up.

This is what is meant by routing. Through those URLs, the site is able to route you to where you want to go. When you bookmark a page on the site, you're actually saving the URL for that page, so you can visit it later.

Now that we've got React Router installed, let's use it.

When you want to use React Router, you have to use a <BrowserRouter> component. This is where components will be routed within and it's common to see this in the root of your application component.

import { BrowserRouter, Route, 
	Switch, Link } from "react-router-dom";

export const Application = () => {
  return (
    <div>
      <BrowserRouter>
        // .. Don't mind this yet
      </BrowserRouter>
    </div>
  );
};

Let's say we want to display two different components — one for a route in our application at /login and one for a route /sign-up. We can set them up like this

const Login = () => {
  return (
    <div>
      <p>Here is where we'd put our Login form 📝</p>
    </div>
  );
};

const SignUp = () => {
  return (
    <div>
      <p>Here is where we'd put our Sign Up form ✍️</p>
    </div>
  );
};

Now that we understand what routing is — let's think about it in terms of React. Out of the box, meaning when you install React by itself, it doesn't have built-in functionality to support routing.

Routing is also a complex thing. You eventually may need things like

• Supporting default routes
• Being able to handle redirects
• Supporting route matching with slugs

Luckily, the folks at React Training have got just the thing to help us with all of that — with React Router. You can install it in your project with a simple

npm install --save react-router-dom

This will save it to your project and we can immediately get started with it.

We've got our <BrowserRouter> and our <Login> and <SignUp> setup. Nice.

We'll use the Route component from React Router to tell the Browser Router that when it encounters a route /login to render the Login component. And the same for the /sign-up route.

<BrowserRouter>
	<p>This text up here will always be displayed</p>
	<Switch>
		<Route path="/login" component={Login} />
		<Route path="/sign-up" component={SignUp} />
	</Switch>
</BrowserRouter>

One thing to note is we placed both within a <Switch> component.

The reason for this is because we only want the matched route (i.e. either the Sign Up component or the Login component to be rendered — not both). The Switch component helps us achieve that functionality.

Conversely, anything placed outside the Switch component will always be rendered — regardless of the matched route. Just like that bit of text we have.

We're almost done — our Browser Router is setup and we've got some routes to navigate between.

We need to finish up by creating links that will actually take us to our routes.

Let's do this by quickly creating the tiniest navigation bar ever. There's a <Link> component that we can use from the React Router package that will be able to take us to different parts of our app.

It accepts multiple props, but at a minimum, you need to provide the to prop — which is the path the link should navigate to.

In the below example, we provide the to prop as well as some styles for the link.

const NavigationButtons = () => {
  // Set up some styles for our links
  const linkStyles = {
    display: "block",
    padding: "10px",
    fontFamily: "Helvetica",
    borderRadius: "8px",
    border: "1px solid grey",
    textDecoration: "none"
  };

  // Set up style for the containing div
  const divStyles = {
    display: "grid",
    gridTemplateColumns: "max-content max-content",
    columnGap: "20px"
  };

  return (
    <div style={{ ...divStyles }}>
      <Link style={{ ...linkStyles }} to="/login">
        Go to Login
      </Link>
      <Link style={{ ...linkStyles }} to="/sign-up">
        Go to Sign Up
      </Link>
    </div>
  );
};

We're all set with the following

✔️ Installed React Router
✔️ Set up a Browser Router
✔️ Created routes in our app
✔️ Defined links that take us to our routes

The final step is to add those two navigation links to our main application component.

To do that, we'll add the <NavigationButtons> component within our Browser Router but outside of the Switch component. This is because we want the buttons to always display, no matter the current route we're at.

Your complete application component should look something like this.

export const Application = () => {
  return (
    <div>
      <BrowserRouter>
        <NavigationButtons />
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/sign-up" component={SignUp} />
        </Switch>
      </BrowserRouter>
    </div>
  );
};

And there you have it, you can easily navigate between those two routes in your app. You're good to go with React Router.