DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

tang
tang

Posted on • Updated on

React Routing Basics

I just learned the veeeeery bare minimum of React Router needed to make a multi-page app, and I'm pretty excited to be playing with it! I'm assuming you've got a basic understanding of HTML and JSX, can write a simple React component, and know how to pass properties to a component.

Most of the tutorials I found would show you how to do stuff, but not really explain what the various JSX elements were or what they did, so I'm gonna have a go at it here.

So, at a basic level, what React Router does is that it lets you render different components based on the URL of the page. I'm not sure how it works under the hood quite yet, but one thing that might be useful is that you'd be able to let some elements (say, a header) remain static across all pages, and just rerender the stuff that needs to be changed from page to page (the content or w/e).

First I imported React and React router, and then I used a BrowserRouter element and a couple of Route elements in order to set up my pages. The BrowserRouter is a single element that holds a single element inside of it. Nested inside of that element are Route elements, which determine what gets displayed when the user's URL has a certain value.

so I set it up something like this:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

<BrowserRouter>
  <div>
    <Route>
    <Route>
  <div>
</BrowserRouter>
Enter fullscreen mode Exit fullscreen mode

If we do this correctly, one Route element will render when we're on one page, and another Route element will render when we're on a different page. Pretty simple!

But how do we specify what URLs toggle each Route element, and what gets rendered in them? We pass properties to them.

Let's say we want our first Route element to render when we're at www.ourwebsite.com/info. We'd do that by adding a "path" prop to our Route element. It looks like this:

<Route path='/info'> 
Enter fullscreen mode Exit fullscreen mode

(assuming, of course that we're hosting our page at ourwebsite.com)

In order to make sure that we get exactly the path we're looking for, we should specify that it should be an exact match. We can do this as such:

<Route exact={true} path='/info'>
Enter fullscreen mode Exit fullscreen mode

Alright! now when we navigate to ourwebsite.com/info it'll know to pick this route and render whatever's specified by it. Only one problem: what do we render?

We can tell the Route what to render by passing it another property, 'render'. Simple, huh? The 'render' property just takes a callback function that returns a JSX element, similar to how the 'render' function in React components returns a single JSX element. So, let's have it return an h1 with "hello world" in it.

<Route exact={true} path='/info' render={()=>(<h1>hello world</h1>)} />
Enter fullscreen mode Exit fullscreen mode

Now when we navigate to /info, the Route element we just defined should resolve to this:

<h1>hello world</h1>
Enter fullscreen mode Exit fullscreen mode

You can also specify a Route element for the homepage! All you have to do is set the 'path' property to '/', as such:

<Route exact={true} path='/' render={()=><h1>this is ourwebsite.com</h1>} />
Enter fullscreen mode Exit fullscreen mode

with these two routes organized as such:

<BrowserRouter>
  <div>
    <Route exact={true} path='/' render={()=>(<h1>this is ourwebsite.com</h1>)} />
    <Route exact={true} path='/info' render={()=><h1>hello world</h1>} />
  </div>
</BrowserRouter>
Enter fullscreen mode Exit fullscreen mode

when you navigate to ourwebsite.com, you'll get this element:

<h1>this is ourwebsite.com</h1>
Enter fullscreen mode Exit fullscreen mode

when you navigate to ourwebsite.com/info, you'll get this one instead!

<h1>hello world</h1>
Enter fullscreen mode Exit fullscreen mode

Another thing:

Okay, so I'm not yet sure what best practices are, but I've got a strategy for rendering the same header on every page. My strategy is basically to render our header component above the BrowserRouter and wrap the whole thing in a div. It looks something like this:

<div>
  <Header />
  <BrowserRouter>
    <div>
      <Route />
      <Route />
    </div>
  </BrowserRouter>
</div>
Enter fullscreen mode Exit fullscreen mode

Obviously, fill in the Route components to whatever specification you need. The following syntax also works, but I'm not sure if it's best practice or not!

<BrowserRouter>
  <div>
    <Header />
    <Route />
    <Route />
  </div>
</BrowserRouter>
Enter fullscreen mode Exit fullscreen mode

If any of y'all have any corrections or advice to offer, I'd be glad to hear!

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git