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;
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.
/*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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With