Get the current route using React Router

Witty Willet answered on December 24, 2020 Popularity 10/10 Helpfulness 3/10

answer Get the current route using React Router

related react get current route

related how to know the current route in react class component

Get the current route using React Router

Comment

import React from 'react';
import {Route, Link, Routes, useLocation} from 'react-router-dom';


export default function App() {
  	return (		
		<div>
			<ul>
				<li>
					<Link to="/">Home</Link>
				</li>
				<li>
					<Link to="/products">Products</Link>
				</li>
			</ul>
			<Routes>		
				<Route path="/products" element={<Products />} />
				<Route path="/" element={<Home />} />
			</Routes>
		</div>	
	);
}

function Home() {
	const location = useLocation();
  	return <>
		<h2>Current Pathname {location.pathname}</h2>
		<p>Home Page</p>
	</>;
}

function Products() {
	const location = useLocation();
  	return <>
		<h2>Current Pathname {location.pathname}</h2>
		<p>Products Page</p>
	</>;
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.datainfinities.com

Tags: get javascript react-router using

Link to this answer
Share Copy Link

Contributed on Apr 30 2023

Witty Willet

0 Answers Avg Quality 2/10

Closely Related Answers

react get current route

Comment

/*In the 5.1 release of react-router there is a hook called useLocation,
which returns the current location object. 
This might be useful any time you need to know the current URL.*/
import { useLocation } from 'react-router-dom';

const location = useLocation();
console.log(location.pathname);

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: stackoverflow.com

Tags: get

Link to this answer
Share Copy Link

Contributed on Dec 24 2020

Snackety Snack

0 Answers Avg Quality 2/10

how to know the current route in react class component

Comment

/*For class based components*/
import { withRouter } from 'react-router-dom';

class SomeComponent extends Component {
  render() {
    console.log(this.props.location)
    console.log(this.props.location.pathname)
    console.log(this.props.location.match)
    return <div>Something</div>
  }
}

export default withRouter(SomeComponent)

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: class clas

Link to this answer
Share Copy Link

Contributed on Aug 09 2021

Frightened Flatworm

0 Answers Avg Quality 2/10

Get the current route using React Router

Contents

More Related Answers

Get the current route using React Router

Closely Related Answers

react get current route

how to know the current route in react class component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.