React Router V4 Получить текущий путь

Question

Как я могу получить текущий путь, используя активный маршрутизатор v4?

Я пробовал следующее безрезультатно:

const currentLocation = this.props.location.pathname;

Ошибка: Cannot read property 'pathname' of undefined

Вот мой файл Routes.js:

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>
    );
  }
}

Answer 1

У вас будет доступ только к this.props.location в Route компоненте (так как пропускаемая часть передается компоненту от него).

Вы можете получить текущий путь с помощью window.location.pathname внеRouter, хотя, вероятно, вы делаете что-то не так, если вы получаете доступ к пути здесь.

Для детей с Router вы можете получить доступ к местоположению, обернув его вокруг withRouter или пропустите опору вниз от компонента Route.

Интеграция Redux также позволит вам получить доступ к местоположению из любого места.

Answer 2

Быстрое решение
Создайте переменную в своей функции:

var currentLocation = window.location.pathname;

, а затем в ul > li className={(currentLocation == '/' ? 'active' : '')}

это сработало для меня и является быстрым решением.

Answer 3

this.props.match.path должен сделать трюк