React Router Parameters

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route exact path="/" component={HomePage}/>
          {/* Parameters are defined by placing a colon before a word. */}
          {/* In this case, `username` is a parameter. */}
          {/* Parameters will be passed to the component. */}
          <Route path="/Users/:username" component={UserPage}/>
        </div>
      </BrowserRouter>
    );
  }
}

// Data from `Route` will be passed as a prop called `match`.
function UserPage({ match }) {
  return (
    <div>
      {/* The URL is passed as `match.url`. */}
      {/* `match.url` and `match.path` will be defined whether or not the path is parameterized. */}
      <div>{`The URL is "${match.url}"!`}</div>
      {/* The path (the one you gave `Route`) is passed as `match.path`. */}
      <div>{`It matched the path "${match.path}"!`}</div>
      {/* The parameters are passed as `match.params`. */}
      <div>{`The parameter is "${match.params.username}"!`}</div>
    </div>
  );
}