Question

我在React应用程序中只有路由器，我想在每个页面上都有一个组件，在该组件中，我想检测url是否正在更改，并根据该路由更改了一些类。我有一个问题，当我通过NavLink更改URL时，我的方法没有被调用，我需要刷新以模拟该componentDidMount生命周期方法。

class App extends React.Component {
  render() {
    return (
      <div>
        <BannerTop />

        <h1>Lorem ipsum</h1>
        <Navigation />
        <Switch>
          <Route path='/o-nas' strict exact component={AboutUs} />
          <Route path='/' strict exact component={Home} />
          <Redirect to='/' />
        </Switch>
      </div>
    );
  }
}

在此横幅中，我想更改班级

class BannerTop extends Component {
  state = {};
  render() {
    return (
      <section className={this.changeClass()} id='banner-top'>
        <div className='container'> Lorem </div>
      </section>
    );
  }

  changeClass = () => {
    console.log(this.props.location);
    return window.location.pathname === '/' ? 'home' : 'other';
  };
}

Answer 1

您可以为此使用withRouter HOC。

示例：

import { withRouter } from "react-router";

class BannerTop extends Component {
  ...

  changeClass = () => {
    const { match, location, history } = this.props;
    console.log(location);
    return location.pathname === '/' ? 'home' : 'other';
  };
}

export default withRouter(BannerTop);

您的BannerTop组件现在已自动得到改进，可以接收您需要的所有布线材料。

反应如何检测路线变更方法

1 个答案: