Hello route

Let's create a simple route that renders a simple component. First, we have a small React component that we want to render when the route is activated:

import React from "react";

export default function MyComponent() {
  return <p>Hello Route!</p>;
}

Next, let's look at the route definition:

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import MyComponent from "./MyComponent";

render(
  <Router>
    <Route exact path="/" component={MyComponent} />
  </Router>,
  document.getElementById("root")
);

The Router component is the top-level component of the application. Let's break it down to find out what's happening within the router.

You have the actual routes declared as <Route> elements. There are two key properties of any route: path and component. When the path is matched against...