3

I am building a react app and using react router 4. The navbar consists of links on left side and couple of buttons on the right hand side (We call it right tools).

Navbar is a part of layout. Now these button are different for different pages. For eg I have 3 pages Dashboard, History and Admin. In Dashboard there is a Filter button, History will have Filter, Download. Admin will have no button.

In angular their is $state.current but cannot find anything similar in React router.

Matching url string is painful. Does anyone have a better solution to this ?

Rima
  • 199
  • 1
  • 7
  • 1
    Possible duplicate of [React Router v4 - How to get current route?](https://stackoverflow.com/questions/42253277/react-router-v4-how-to-get-current-route) – Revansiddh Aug 06 '18 at 08:31

3 Answers3

4

This was sort of explained, but I don't think it was super clear. It's really easy if you're using a functional component.

When importing the router, include 'useLocation'. 

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

And then instantiate it at the start of the component. 

let location = useLocation();

Then whenever you need to use it, just call it. 

console.log(location.pathname);

Easy!

Andre Thompson
  • 300
  • 2
  • 9
0

When you make use of react-router, you can identify which path you are currently on by simply reading the location.pathname from the props.

If the component in which you are trying to access location.pathname isn't connected to the Route directly or isn't receiving the Router props, you can wrap it with the withRouter HOC to access router props.

Also, router has a prop called as match which gives the closest match route information to the component that you are using that in

For example, in a Route configuration

<Route path="/" component={Home} />

Home.jsx

render() {
    console.log(this.props.match.path);
    return (
        <div>
             <Route path="/user" component={User}/>
        </div>
    )
}

So in the above case if you are visiting the url: /user, and if you log this.props.match.url, it will result in / which isn't the desired result that you might be looking for.

A way to get around this is to use matchPath method that is provided by react-router

A typical usage of it would be 

const { match } = this.props;
let { hash } = window.location;
[hash] = hash.slice(1).split('?');
// match.path is the path that is matched till the parent
const customMatch = matchPath(hash, {
    path: `${match.path}user`,
    exact: false,
    strict: false
});
console.log(customMatch)
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
0

A simple way which is working for me is here this.props.match For explore it you can console it in your current component and it will provide all details to you. 

  render() {
        console.warn("url details", this.props.match.params.id)
        return (

keep in mind that You must console it in current main component for full path. If you will try to supportive component such as NAV or breadcrumb. it may not work property. and let me know if you have still issue.

anil sidhu
  • 963
  • 1
  • 9
  • 24