Question

id喜欢在我的联系页面中更改标题颜色。无法从React Router获取位置。我收到“ 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与Router一起使用。

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

为清楚起见进行编辑：

如果在路由器中的“路线”组件中渲染组件：

<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;

但是，如果组件未通过Route传递，则将无法访问位置道具。例如，如果您将标题放置在路线之外，则类似：

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

它将没有位置道具。

我不确定您的组件树是如何设置的，但是我希望这可以使您在应用中如何访问和使用位置道具更加清晰。

该文档是了解React Router的工作原理的好地方https://reacttraining.com/react-router/core/api/Route/route-props

Answer 2

是的，我可以在联系路径中看到

<li><NavLink to={'Contact'}>Contact</NavLink></li>，应该是

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

您必须在路径名前加上反斜杠，即“ / ”。因此，请立即尝试。

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

2 个答案: