React Router V4 Get Current Path

react-router get current route
react-router v3 get current route
react-router get id from route
react-router-dom get current route
react-router matchpath
reach/router get current route
react-router v5 get current route
react router history

How can I get the current path using react router v4?

I have tried the following to no avail:

const currentLocation = this.props.location.pathname;

Error: Cannot read property 'pathname' of undefined

Here is my Routes.js file:

import React, {Component} from 'react';
import {  BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './Store';
import LevelOne from './containers/LevelOne';
import LevelTwo from './containers/LevelTwo';
import LevelThree from './containers/LevelThree';
import CreateProfile from './containers/Profile/CreateProfile';
import WhosWatching from './containers/Profile/WhosWatching';
import ProfileNameAvatar from './containers/Profile/ProfileNameAvatar';
import FavouriteGenres from './containers/Profile/FavouriteGenres';
import FourZeroFour from './containers/404';

import Header from './components/Header';

const store = configureStore();

const navItems = [
  {
    title:"For You",
    to: "/for-you"
  },
  {
    title:"Movies",
    to: "/movies"
  },
  {
    title:"Series",
    to: "/series"
  },
  {
    title:"TV Shows",
    to: "/tv-Shows"
  },
  {
    title:"Subscriptions",
    to: "/subscriptions"
  },
  {
    title:"Live TV",
    to: "/live-tv"
  }
]

export default class Routes extends Component {
  state = {
    theme: 'light'
  }

  header = React.createRef();

  setTheme = (theme) => {
    this.setState({
      theme: theme,
    });
  }

  render() {
    const currentLocation = this.props.location.pathname;
    console.log("location", currentLocation);
    return (
      <Provider store={store}>
        <Router ref='router'>
          <div className='app'>
            {/*<Header navItems={navItems} theme={this.state.theme} ref={this.header} />*/}
            <Switch>
              <Route exact path="/" render={(props) => (
                <LevelOne {...props} setTheme={this.setTheme} />
              )}/>
              <Route exact path="/for-you" render={(props) => (
                <LevelTwo {...props} setTheme={this.setTheme} />
              )}/>
              <Route exact path="/for-you/view-all" render={(props) => (
                <LevelThree {...props} setTheme={this.setTheme} innerRef={this.header} />
              )}/>
              <Route exact path="/profile/create-profile" render={(props) => (
                <CreateProfile {...props} />
              )}/>
              <Route exact path="/profile/whos-watching" render={(props) => (
                <WhosWatching {...props} />
              )}/>
              <Route exact path="/profile/profile-name-avatar" render={(props) => (
                <ProfileNameAvatar {...props} />
              )}/>
              <Route exact path="/profile/favourite-genres" render={(props) => (
                <FavouriteGenres {...props} />
              )}/>
              <Route component={FourZeroFour} />
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}

You will only have access to this.props.location in a Route component (as the prop is passed to the component from it).

You can get the current path with window.location.pathname outside of the Router, though it's likely that you are doing something wrong if you are accessing the path here.

For children of Router, you can access the location by wrapping it around withRouter or pass the prop downwards from a Route component.

Redux integration will also allow you to access the location from anywhere.

React Router v4 get current location, You can use the withrouter HOC for this. It will re-render the wrapped component anytime the route changes. Here's an example - import {Meteor} from  How can I get a variable from the path in react router? Ask Question Asked 1 year, 11 months ago. Active 25 days ago. React Router v4 - How to get current route?

Fast solution Create a variable on your function:

var currentLocation = window.location.pathname;

and then in the ul > li className={(currentLocation == '/' ? 'active' : '')}

it worked for mee and is a quick solution.

Grab active route using react router v4 · Issue #4793 · ReactTraining , First of all, thanks for working on React Router v4. I like the Here is our current implementation of the Anchor that uses React v3: isActive is gone and what would be a way to get the active route without using JSX for that? React Router v4: The Complete Guide. React Router is the standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router does that, keeping your application UI and the URL in sync.

this.props.match.path should do the trick

React Router V4 Get Current Path, How can I get the current path using react router v4? I have tried the following to no avail: const currentLocation = this.props.location.pathname; Error: Cannot  React Router v4 has a new API that's pretty cool. The method for accessing the route params is different, and it's very straightforward. First, get React Router in your web project by installing: npm install react-router-dom --save Wrap in Router. Now, somewhere near the top of your component tree, you'll place a parent Router element:

The Hitchhiker's Guide to React Router v4: [match, location, history , Welcome to the Hitchhiker's Guide to React Router v4, Part II! What happens if you get inside your Home Component code and put a Later on we'll do an example where you Link to a relative path where you don't know  In this tutorial we are going to get you started with react-router-dom (React Router 5) using an example React application showing you how to use different concepts such as Link and NavLink for creating links (instead of anchors) in the React way, Switch and exact for enabling exclusive routing and browser routing history.

React Router v5.1, At its heart, React Router is a state container for the current location , or URL. It keeps track of the location and renders different <Route> s as it changes In both cases, it receives a `match` // prop, which it uses to get the URL  react-router 4. v4 has removed the JS API from the code base which means the above methods won't work moving forward. The new way is to actually pass the props directly to the component being rendered, just like you normally would with any other component in you React app.

Route, Use it to access match.params of the current <Route> . import React from "react" Get the underlying ref of the component using React.createRef . let anchorRef​  for react-router ^2.4.1; this.props.location.pathname returns a string of the current route. 👍 47 😄 1 🎉 15 ️ 1 This comment has been minimized.

Comments
  • Thank you for this @riwu - exactly what I was after.
  • If you're looking to retrieve the exact Route with a reference like a key or a name, check stackoverflow.com/a/59217492/1702919
  • it will not build
  • Thanks for your answer, I replaced the currentLocation const with your suggestion and got an error with: Cannot read property 'path' of undefined
  • Sorry, my command was ment to be used inside of the Router Component i believe