TypeError：属性未定义 应对

Question

I am new to React so this questions is probably very basic, but I'd like some help.

All of the sudden Eslint started shouting at me because of no-restricted-globals , so I began to fix those errors. However, I got this classical error just now TypeError: Cannot read property 'location' of undefined , and here's the code:

import React from 'react'

export default props => {
  const url = ['#'].concat(props.to).join('/')
  const { location } = this.props
  return (
    <a
      href={url}
      onClick={props.onClick}
      className={location.hash.indexOf(url) === 0 ? 'active' : undefined}
    >
      {props.children}
    </a>
  )
}

I would really appreciate if someone explained why location is undefined, I just can't get that. Thanks for reading everyone!

Answer 1

Try to use this:

import React from 'react'

    export default props => {
      const url = ['#'].concat(props.to).join('/')
      const location= this.props.location?this.props.location:[]
      return (
        
          {props.children}
        
      )
    }

Hope This might run properly!