React ocation.pathname typerror: Cannot call location.pathname in one file, but can in other file

Question

在我的一个组件中，我可以轻松调用 "this.props.location.pathname"。但是当我在另一个组件中尝试这个时，我得到

TypeError: Cannot read property 'pathname' of undefined

而且我似乎无法找出有什么不同..

作品：

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

您的导航组件不是路由组件。 [您在 react-router 配置中针对路由使用的组件]

我猜 RedirectUser 组件就是这样一个组件

例如

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

只有这些组件可以访问 this.props.location。

您需要将 prop 传递给您的导航组件，或者正如@jens 建议的那样，将 withRouter HOC 与 MainNavigation 一起使用

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

React ocation.pathname typerror: Cannot call location.pathname in one file, but can in other file

React ocation.pathname typerror: Cannot call location.pathname in one file, but can in other file

undefined

pathname

reactjs

作品：

不起作用