не получается местоположение реагирует роутер?

Question

ID хотел бы изменить цвет моего заголовка, когда на моей странице контактов. невозможно получить местоположение от реагирующего маршрутизатора. Я получаю "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

Да, я вижу в контактной дорожке

<li><NavLink to={'Contact'}>Contact</NavLink></li>, это должно быть что-то вроде

<li><NavLink to='/Contact'>Contact</NavLink></li>.

Вы должны включить обратную косую черту , я имею в виду ' / ' перед именем пути. Так что попробуйте сейчас.

Answer 2

Вам необходимо передать реквизиты для определения местоположения вашему компоненту Header или вы можете использовать HOC withRouter в Reaction-router-dom.

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

Изменить для наглядности:

Если вы визуализируете компонент в маршрутизаторе в компоненте Route:

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

Это даст этому компоненту (в данном случае 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>

У него не будет опор местоположения.

Я не уверен, как настроено ваше дерево компонентов, но, надеюсь, это немного прояснит, как получить доступ к реквизитам местоположения и использовать их в вашем приложении.

Документация - хорошее место, чтобы получить больше ясности о работе реакции маршрутизатора. https://reacttraining.com/react-router/core/api/Route/route-props