Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get the current path in a react component [duplicate]

To determine the styling of specific menu item, I am trying to get the current path in my Navigation component.

I tried some of the usual suspects already, but cannot get any results. Especially properties that I thought would be injected via React are not there.

this.props.location returns undefined

this.props.context returns undefined

I use react 15, redux 3.5, react-router 2, react-router-redux 4

import React, {Component, PropTypes} from 'react';
import styles from './Navigation.css';
import NavigationItem from './NavigationItem';

class Navigation extends Component {

  constructor(props) {
    super(props);
  }

  getNavigationClasses() {
    let {navigationOpen, showNavigation} = this.props.layout;
    let navigationClasses = navigationOpen ? styles.navigation + ' ' + styles.open : styles.navigation;
    if (showNavigation) {
      navigationClasses = navigationClasses + ' ' + styles.collapsed;
    }
    return navigationClasses;
  }

  render() {
  /*
  TODO:  get pathname for active marker
  */

    let navigationClasses = this.getNavigationClasses();
    return (
      <div
        className={navigationClasses}
        onClick={this.props.onToggleNavigation}
      >

        {/* Timeline */}
        <NavigationItem
          linkTo='/timeline'
          className={styles.navigationItem + ' ' + styles.timeline}
          displayText='Timeline'
          iconType='timeline'
        />

        {/* Contacts */}
        <NavigationItem
          linkTo='/contacts'
          className={styles.navigationItem + ' ' + styles.contact + ' ' + styles.active}
          displayText='Contacts'
          iconType='contacts'
        />

      </div>
    );
  }
}

Navigation.propTypes = {
  layout: PropTypes.object,
  className: PropTypes.string,
  onToggleNavigation: PropTypes.func
};

export default Navigation;
like image 852
Anna Melzer Avatar asked Jun 23 '16 11:06

Anna Melzer


People also ask

How do I get the current pathname in React?

Use the window object to get the current URL in React, e.g. window. location. href returns a string containing the whole URL. If you need to access the path, use window.

How do you find the current path in a class component React?

/*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.

How do I get the current URL location React?

Here is a code example of getting the current URL with the useLocation hook: javascript import React from "react"; import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; import { createRoot } from "react-dom/client"; const All = () => { const location = useLocation(); // The current location.


1 Answers

Add your component to router first

<Router path="/" component={Navigation}  />

You can get your path in

this.props.location.pathname

This is a readme for location

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

like image 65
Philip Moniaga Avatar answered Oct 10 '22 17:10

Philip Moniaga