Реагирует ocation.pathname typerror: Невозможно вызвать location.pathname в одном файле, но можно в другом файле

Question

В одном из моих компонентов я могу легко вызвать "this.props.location.pathname". Но когда я пробую это в другом компоненте, я получаю

Ошибка типа: невозможно прочитать свойство 'pathname' из неопределенного

И я не могу выяснить, что отличается..

РАБОТАЕТ:

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';

export default class RedirectUser extends Component  {
    render () {
        return (
            <span className='redirecting'>
                {this.props.location.pathname === '/' || this.props.location.pathname === '/mgmt' || this.props.location.pathname === '/mgmt/' ?
                    <Redirect to='/mgmt/entrepreneurs' />
                : this.props.location.pathname === '/user' || this.props.location.pathname === '/user/' ? 
                    <Redirect to='/user/settings' />
                : this.props.location.pathname === '/dev' || this.props.location.pathname === '/dev/' ? 
                    <Redirect to='/dev/story' />
                : null
                }
            </span>
        );
    }
};

НЕ РАБОТАЕТ

import React, { Component } from 'react';
import { NavLink, Link } from 'react-router-dom';
import Icon from '../library/icons/Icon';
import '../App.css';
import { UserConsumer } from '../App.js';
import ProfilePicture from '../library/imgs/examples/profilepic.jpg';

export default class MainNavigation extends Component  {
    constructor (props) {
        super (props)
        this.state = {
            nav: this.props.location.pathname === '/mgmt' ? 
                    'management' 
                :this.props.location.pathname === '/social' ? 
                    'social' 
                :this.props.location.pathname === '/work' ?
                    'work'
                :this.props.location.pathname === '/dev' ?
                    'dev'
                : 'management',
            navFloat: false,
            greeting: '',
            mobileMenu: false
        }
        this.closeNavTab = this.closeNavTab.bind(this);
    }
...
...

Answer 1

Ваш компонент навигации не является компонентом маршрута. [Компонент, который вы используете в конфигурации вашего маршрутизатора против маршрута]

Я предполагаю, что компонент RedirectUser является одним из таких компонентов

например

<Route path='...' component={RedirectUser}/>

Только эти компоненты имеют доступ к this.props.location.

Вам нужно будет передать реквизит для вашего навигационного компонента или, как @jens предлагает использовать withRouter HOC с MainNavigation

import { withRouter } from 'react-router-dom'
.... 
....
export default withRouter(MainNavigation)