react router 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 useLocation()

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";

function usePageViews() {
  let location = useLocation();
  React.useEffect(() => {
    ga.send(["pageview", location.pathname]);
  }, [location]);
}

function App() {
  usePageViews();
  return ...;
}

ReactDOM.render(
  
    
  ,
  node
);

Example 3: react router

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

export default function App() {
  return (
    
      

        

          

            Home
          
          

            About
          
          

            Topics
          
        

        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

function Home() {
  return 
Home
;
}

function About() {
  return 
About
;
}

function Topics() {
  let match = useRouteMatch();

  return (
    

      
Topics

      

        

          Components
        
        

          
            Props v. State
          
        
      

      {/* The Topics page has its own  with more routes
          that build on the /topics URL path. You can think of the
          2nd  here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}
      
        
          
        
        
          
Please select a topic.
        
      
    
  );
}

function Topic() {
  let { topicId } = useParams();
  return 
Requested topic ID: {topicId}
;
}

Example 4: useHistory goback

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

const history = useHistory();

 history.goBack()}>Go Back

Example 5: usematch react router

import React from 'react'
import ReactDOM from 'react-dom'
import { useParams } from 'react-router-dom'

function BlogPost() {
  // We can call useParams() here to get the params,
  // or in any child element as well!
  let { slug } = useParams()
  // ...
}

ReactDOM.render(
  
    

      
        {/* No weird props here, just use
            regular `children` elements! */}
        
          
        
      
    
  ,
  document.getElementById('root')
)

Example 6: useparams react hooks

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

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

ReactDOM.render(
  
    
      
        
      
      
        
      
    
  ,
  node
);