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

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

0 голосов
/ 10 января 2019

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

TypeError: Невозможно прочитать свойство '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);
    }
...
...

1 Ответ

0 голосов
/ 10 января 2019

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

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

например, 

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

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

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

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