#react
    #javascript
    #react-router

Figuring out React Router

What is Routing?

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.


Setting up React Router

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>
  );
};

Installing React Router

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.


Using Routes to Display Components

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>
  );
};

Finishing Up with React Router

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.


zerochass

practical and goal-oriented resources

learn by doing. enjoy what you do.