Question

我的Nav组件中没有道具。奇怪的是，“ this.props.history.push”在我的其他组件中起作用。

相同的函数在我的其他组件中也起作用，但是当我尝试调用push函数时，我在注销时得到“ err TypeError：无法读取未定义的属性” push”。 “ this.props”对象记录为“ {}”。

感谢您的帮助，谢谢。

import React from 'react'

import logo from 'logo.png'

import css from './Nav.module.scss'

import { Link } from 'react-router-dom'

import Cookies from 'js-cookie'
import axios from 'axios'

class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loggedIn: false
    }
    console.log(this.props)
  }

  _handleLogout = () => {
    // const self = this
    console.log(this.props)
    axios.get('http://localhost:8080/logout', {
      withCredentials: true
    })
    .then(res => {
      console.log(res)
      console.log('logout')
      if (Cookies.get('sid') === undefined) {
        this.props.history.push('/')
      }
      console.log(this.props)
    })
    .catch(err => {
      console.log('err in logout', err)
    })
  }

  render() {
    return (
      <div className={css.nav}>
        <div className={css.leftPart}>
          <Link to="/">
            <div className={css.brandicon}>
              <img src={logo} alt="Logo" />
            </div>
            <div className={css.brandname}>
              somebrand
            </div>
          </Link>
        </div>
        <div className={css.rightPart}>
          {
            Cookies.get('sid') === undefined ?
              <Link to="/login">
                <div className={css.loginButton}>
                  Login
                </div>
              </Link>
              :
              <div className={css.logoutButton} onClick={this._handleLogout}>
                Logout
              </div>
          }
        </div>
      </div>
    )
  }
}

export default Nav

我的Nav组件在Layout组件中仅被引用一次：

import React from 'react'

import Nav from 'components/Nav/Nav'

import css from './BasicLayout.module.scss'

class Basic extends React.Component {
  render() {
    return (
      <div className={css.page}>
        <Nav />
        <div className={css.content}>
          {this.props.children}
        </div>
      </div>
    )
  }
}

export default Basic

Answer 1

history和location是由React Router的HOC props注入的特殊withRouter

import { withRouter } from 'react-router-dom'
class Nav extends React.Component{
    render(){
        const { history, location } = this.props
        return <div>{`I'm at ${location.pathname}`}</div>
    }
}
export default withRouter(Nav)

它也适用于functional components

export const Component = withRouter(({ history, location })) =>(
    <div>{`I'm at ${location.pathname}`}</div>
)

没有在React组件中获得道具

1 个答案: