没有得到位置反应路由器？

Question

我想在联系人页面中更改标题颜色。无法从react路由器获取位置。我得到“TypeError：无法读取未定义的属性'pathname'”。

我知道我错过了一些简单的东西，但我似乎想不出来。

import React from 'react';
import './Header.css';
import { NavLink } from 'react-router-dom';

class Header extends React.Component {

  render() {

    const blackHeader = {"background-color" : 'black'}
    const clearHeader = {"background-color" : 'transparent'}

    return(
        <header style={ this.props.location.pathname === '/Contact' ? { blackHeader } : { clearHeader } }>
          <NavLink to={'/'}><h2>Name</h2></NavLink>
          <nav>
            <ul>
              <li><NavLink to={'/'}>Portfolio</NavLink></li>
              <li><NavLink to={'Contact'}>Contact</NavLink></li>
              <li>Blog</li>
            </ul>
          </nav>
        </header>
    )
  }
}

export default Header;

Answer 1

您需要将位置道具传递给Header组件，或者可以在react-router-dom中使用HOC wishrouter。

import { NavLink, withRouter } from 'react-router-dom';
export default withRouter(Header)

为清晰起见编辑：

如果在路由组件中呈现路由器中的组件：

<Route path='/' component={Home} />

import React, { Component } from 'react'
import OtherComponent from './OtherComponent'

class Home extends Component {
  render() {
    return (
      <div>
        <OtherComponent locations={this.props.locations}
      </div>
    )
  }
}
export default Home;

<Router>
  <Header/>
  <Switch>
    <Route path='/' component={Home}/>
  </Switch>
</Router>