React Router v4 – How to get current route?

I’d like to display a title in <AppBar /> that is somehow passed in from the current route.

In React Router v4, how would <AppBar /> be able to get the current route passed into it’s title prop?

  <Router basename='/app'>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />

Is there a way to pass a custom title from a custom prop on <Route />?


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In the 5.1 release of react-router there is a hook called useLocation, which returns the current location object. This might useful any time you need to know the current URL.

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

function HeaderView() {
  const location = useLocation();
  return <span>Path : {location.pathname}</span>

Method 2

In react router 4 the current route is in –
Just get this.props and verify.
If you still do not see location.pathname then you should use the decorator withRouter.

This might look something like this:

import {withRouter} from 'react-router-dom';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;

Method 3

If you are using react’s templates, where the end of your react file looks like this: export default SomeComponent you need to use the higher-order component (often referred to as an “HOC”), withRouter.

First, you’ll need to import withRouter like so:

import {withRouter} from 'react-router-dom';

Next, you’ll want to use withRouter. You can do this by change your component’s export. It’s likely you want to change from export default ComponentName to export default withRouter(ComponentName).

Then you can get the route (and other information) from props. Specifically, location, match, and history. The code to spit out the pathname would be:


A good writeup with additional information is available here:

Method 4

There’s a hook called useLocation in react-router v5, no need for HOC or other stuff, it’s very succinctly and convenient.

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

const ExampleComponent: React.FC = () => {
  const location = useLocation();  

  return (
    <Router basename='/app'>
        <AppBar handleMenuIcon={this.handleMenuIcon} title={location.pathname} />

Method 5

Here is a solution using history Read more

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

inside Router


Method 6

Has Con Posidielov said, the current route is present in this.props.location.pathname.

But if you want to match a more specific field like a key (or a name), you may use matchPath to find the original route reference.

import { matchPath } from `react-router`

const routes = [{
  key: 'page1'
  exact: true,
  path: '/page1/:someparam/',
  component: Page1,
  exact: true,
  key: 'page2',
  path: '/page2',
  component: Page2,

const currentRoute = routes.find(
  route => matchPath(this.props.location.pathname, route)

console.log(`My current route key is : ${currentRoute.key}`)

Method 7

I think the author’s of React Router (v4) just added that withRouter HOC to appease certain users. However, I believe the better approach is to just use render prop and make a simple PropsRoute component that passes those props. This is easier to test as you it doesn’t “connect” the component like withRouter does. Have a bunch of nested components wrapped in withRouter and it’s not going to be fun. Another benefit is you can also use this pass through whatever props you want to the Route. Here’s the simple example using render prop. (pretty much the exact example from their website

import React from 'react';
import { Route } from 'react-router';

export const PropsRoute = ({ component: Component, ...props }) => (
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }

export default PropsRoute;

usage: (notice to get the route params (match.params) you can just use this component and those will be passed for you)

import React from 'react';
import PropsRoute from 'src/components/routes/props-route';

export const someComponent = props => (<PropsRoute component={ Profile } />);

also notice that you could pass whatever extra props you want this way too

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />

Method 8


import {withRouter} from 'react-router-dom';

Then change your component export

export default withRouter(ComponentName)

Then you can access the route directly within the component itself (without touching anything else in your project) using:


Tested March 2020 with: “version”: “5.1.2”

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x