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>

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'> 

(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'>

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

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

<h1>hello world</h1>

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>} />

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>

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

<h1>this is ourwebsite.com</h1>

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

<h1>hello world</h1>

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>

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>

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