this.props.location.pathname for dynamic URLs in React

Question

If you have URLs in your app that can change (e.g /profile/1 and /profile/2, how do you access that from this.props.location.pathname?

In my Profile component I have a componentDidMount method like so:

componentDidMount () {
    if (this.props.location.pathname === 'profile/:id/') {
      console.log('is profile')
  } else {
      console.log('is not profile')
  }
}

Which returns is not profile when I'm on the profile pages.

The project I'm using uses react-redux-starter-kit as a base (not sure if that helps), which uses react-router-v3.

Roy Wang · Accepted Answer · 2018-04-22 10:51:12Z

3

You can try this

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

if (matchPath(this.props.location.pathname, { path: 'profile/:id' })) {}

Or

this.props.match.path === 'profile/:id'

I'm not sure why your Profile component gets mounted if it's not a profile though.

answered Apr 22, 2018 at 10:51

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomasz Mularczyk · Accepted Answer · 2018-04-22 10:51:40Z

3

if (this.props.location.pathname === 'profile/:id/')

this will never be true because of :id is a matcher:

try:

if (this.props.match.params.id)

This way you will check if there's id parameter in current route.

https://jaketrent.com/post/access-route-params-react-router-v4/

answered Apr 22, 2018 at 10:51

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

3 Comments

a7dc Over a year ago

Sorry Tomasz, should've clarified I'm using react-router ^3.0.0

Tomasz Mularczyk Over a year ago

@A7DC I think it's the same.

a7dc Over a year ago

Thanks Tomasz, didn't work for me but lead me in the right direction

David Buck · Accepted Answer · 2020-08-26 21:32:07Z

2

With React hooks you can do something like this

import {Route, useRouteMatch} from 'react-router-dom'

const App = () => {
    const match = useRouteMatch("match/this/route/:id")
    return (
        //suppose you dont want to show navbar in this route
        {match && match.path === 'match/this/route/:id' ? <SomeComponent/> : <Navbar/>}
    )}
//match.path check for the dynamic route match/this/route/:id

edited Aug 26, 2020 at 21:32

David Buck

3,87740 gold badges54 silver badges73 bronze badges

answered Aug 26, 2020 at 17:28

shubnagar29

211 silver badge3 bronze badges

Comments

a7dc · Accepted Answer · 2018-04-22 15:15:45Z

1

This doesn't feel like the best way to do this, but it worked for me:

this.props.location.pathname === '/profile/' + this.props.params.id

answered Apr 22, 2018 at 15:15

a7dc

3,4368 gold badges38 silver badges58 bronze badges

Comments

Sunil Kumar · Accepted Answer · 2020-08-26 17:56:01Z

0

use match props to get dynamic path

componentDidMount () {
  if (this.props.match.path === 'profile/:id') {
    console.log('is profile')
  } else {
    console.log('is not profile')
  }
}

refer this for more information react-redux-match

answered Aug 26, 2020 at 17:56

Sunil Kumar

4204 silver badges14 bronze badges

Collectives™ on Stack Overflow

this.props.location.pathname for dynamic URLs in React

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related