React Routing

I am about 12 weeks into a coding bootcamp and we've just started learning about good ol' React. There's so much cool stuff encompassed within React but I'm going to spend some time telling you all about one of my favorite aspects of it so far which is how React handles it's routing. React Router is an amazing tool that allows a developer to provide specific URL's that are tied to specific components within their react app. I'm sure you can see how this makes for a much more friendly user experience when compared to only being able to use the back button or links within the app. Getting started with React Router is very simple. All you have to do is npm install react-router-dom from your terminal and you will have access to all of its wonders.

Components

1. Routers
2. Route Matchers
3. Navigation Components

First we have the routers which are BrowserRouter and HashRouter.
I haven't spent much time with HashRouter so I will mostly be discussing BrowserRouter. I do know that the main difference between them is the way they store the URL and communicate with your web server.
At the core of every React Router application should be a router component. To make sure you are using your router component just import BrowserRouter from react-router-dom in your top level (most usually app) component of your project.

Note: You can rename BrowserRouter so that it's easier to write in your code. Most simply rename BrowserRouter as Router shown below.

npm install react-router-dom
// In your terminal



import { BrowserRouter as Router } from 'react-router-dom';
// At the top level of your project

Second we have the route matcher components like Route and Switch. I'm going to talk about the Switch route matcher component first because it contains Route components within it. When a switch is rendered, it searches through its children Route elements to find one whose path matches the current URL. When it finds one, it renders that route and disregards all the other ones. This means that if you are using a switch you should put route's with more specific paths before less-specific ones. This is because the switch will render the first route that matches the one entered. If no Route matches, the Switch renders nothing.

<Switch>
  <Route exact path="/animals" component={Animals} />
  <Route path="/animals/fish" component={Fish} />
  <Route component={Missing} />
</Switch>

In the above code, the exact path attribute is being used so that the switch renders "/animals" when someone visits "/animals/fish". Without the exact path attribute, you would have to put "/animals" as the last route in your switch.

One significant thing to note is that a route path matches the beginning of the URL, not the whole thing. This means that a route path of "/" will always match any URL due to the fact that all URL's begin with "/". Because of this, we'll want to put the root route as the last in our switch. You can also use a route component without using a switch however you'll want to use the route's exact path attribute which will make it so that if the URL entered is not the exact route URL you've provided then nothing will happen.

Last but not least we have navigation components:

1. Link
2. NavLink
3. NavBar

Link components work intuitively, wherever you put a link component in your react app will generate a link(a tag) on your HTML. If you'd like any links to remain at the top of your app for navigational purposes you can use a simple NavBar component. A NavBar component allows you to prepend any links that you'd like to the top of your SPA. You can render a NavBar component like so:

// App.js

import NavBar from '../components/NavBar';

const App = (props) => {
  return (
    <Router>
      <div>
        <NavBar />
          <Route exact path="/" component={Home}/>
          <Route exact path="/movies" component={Movies}/>
          <Route exact path="/directors" component={Directors}/>
          <Route exact path="/actors" component={Actors}/>
      </div>
    </Router>
  );
};

// NavBar.js

import { NavLink } from 'react-router-dom';

const NavBar = () => {
  return (
    <div className="navbar">
      <ul>
        <li><NavLink exact to="/">Home</NavLink></li>
        <li><NavLink exact to="/movies">Movies</NavLink></li>
        <li><NavLink exact to="/directors">Directors</NavLink></li>
        <li><NavLink exact to="/actors">Actors</NavLink></li>
      </ul>
    </div>
  );
};

There's a lot more to React Routing but this is all I have for you now as I have just begun my journey with this wonderful technology. For more info please check out the React docs (they have really good docs) and there is also a react router tutorial that I found to be immensely helpful in getting an idea of how routing works with react.