useParams code example

Example 1: usehistory, uselocation

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    
      Go home
    
  );
}

Example 2: react router dom current path hook

import { useLocation } from 'react-router-dom'

// Location is, for example: http://localhost:3000/users/new

// Care! MyComponent must be inside Router to work
const MyComponent = () => {
	const location = useLocation()
    
    // location.pathname is '/users/new'
    return Path is: {location.pathname}
}

export default MyComponent

Example 3: useparams

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return 
Now showing post {slug}
;
}

ReactDOM.render(
  
    
      
        
      
      
        
      
    
  ,
  node
);

Example 4: useParams

import { useParams } from "@reach/router"

// route: /user/:userName
const User = () => {
  const params = useParams();

  return 
{params.userName}
)

Example 5: useparams

import { useParams } from "@reach/router"

// route: /user/:userName
const User = () => {
  const params = useParams();

  return 
{params.userName}
)