When we go into a website or use any webapp, as we navigate through pages and sections, we really are just modifying our url. For example, when you go to someones twitter’s profile, the url looks something like this: 

 component with my user’s data on it, however, if the username was someone elses, all the data would be different, yet the component would stay the same. 

This is the power of URL Parameters, they allow us to essentially inverse control and let the end user decide what component to see and pass a prop into such component.

In order to accomplish something like this, we would have to write:

 aka URL Parameter, we would have to do something like this:

 } from 'react-router-dom'

function Profile () {
  const [user, setUser] = React.useState(null)
  const { handle } = 



  React.useEffect(() => {
    fetch(`https://api.twitter.com/user/${handle}`)
      .then(setUser)
  }, handle)

  return (
    ...
  )
}

 provides for us if we have set it up correctly so that we can easily destructure any params out of the object it returns. The param will have whatever name we gave it when defining the route, in this case it was 

If we want to add links to let our user navigate and essentially change that url with a click, we can do so with another tool that 

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

function Account() {
  const { account } = useParams();

  return <h3>ID: {account}</h3>;
}

export default function App () {
  return (
    <Router>
      <React.Fragment>
        <h2>Accounts</h2>
        <ul>
          <li><Link to="/netflix">Netflix</Link></li>
          <li><Link to="/zillow-group">Zillow Group</Link></li>
          <li><Link to="/yahoo">Yahoo</Link></li>
          <li><Link to="/modus-create">Modus Create</Link></li>
        </ul>

        <Route path='/:account'>
          <Account />
        </Route>
      </React.Fragment>
    </Router>
  )
}