React Handbook

​x
 
import { HashRouter, Switch, Route, Link } from 'react-router-dom'
​
function App () {
​
  return (
   <HashRouter>
     <div className="nav">
       <Link to="/home">
         Home
       </Link>
       <Link to="/user/1">
         User 1
       </Link>
       <Link to="/user/2">
         User 2
       </Link>
     </div>
     
     <Switch>
       <Route
         path="/home"
         component={() => <div>Home page</div>} />
       <Route
         path="/user/:id"
         component={UserPage} />
     </Switch>
  </HashRouter>
  )
}
​
function UserPage ({ match, history, location }) {
  return (
    <div>
      User {match.params.id}
    </div>
  )
}

In real-life apps you will often find yourself using route parameters. In this example we will show how to retrieve the user's ID from the URL. We can also see that the UserPage component receives 3 props (history, match, location) due to being a Route's direct component.

Home User 1 User 2