javascript - 根据路线 react 路由器导航栏

Question

我正在尝试根据我的 React 应用程序中的当前路径设置导航栏链接的样式，如果路径是/create 或/add，它应该更改其样式。到目前为止，这是我的 header 组件中的内容:

          <div
            id="createLink"
            className={this.state.createClassName}
            onClick={() => this.handleModalToggle()}
          >
            CREATE
          </div>

  handleActiveLink= () => {
    let path = this.props.location.pathname
     if (path === "/add" | path === "/create") {
       this.setState({createClassName: "nav-link-active"})
     } else {
       this.setState({ createClassName: "nav-link" })
     }
  };

  componentDidMount() {
    this.handleActiveLink()
  }

这有效，但只有在我刷新页面后才有意义，但这不是我想要的。所以我正在寻找一种方法来在渲染之前更改类名并首先获取路径(我正在使用来自 react-router-dom 的 withRouter)

Answer 1

问题似乎是您只在组件安装时检查路径，而不是在组件更新时检查路径。您还应该 checkin componentDidUpdate

handleActiveLink= () => {
  let path = this.props.location.pathname;
  if (path === "/add" || path === "/create") {
    this.setState({createClassName: "nav-link-active"});
  } else {
    this.setState({ createClassName: "nav-link" });
  }
};

componentDidMount() {
  this.handleActiveLink();
}

componentDidUpdate() {
  this.handleActiveLink();
}

在这种情况下，我建议不要将此类 transient 数据存储在状态中，并简单地从 props 派生它并在渲染函数(或任何地方)中设置为类名你渲染它)。通过这种方式，它会计算每次渲染何时 UI 将被某些东西更新并且将始终是最新的(即您无需担心生命​​周期函数)。

render() {
  const { location: { pathname } } = this.props;
  const linkClass = ["/add", "/create"].includes(pathname)
    ? "nav-link-active"
    : "nav-link";

  ...

  <div
    id="createLink"
    className={linkClass}
    onClick={() => this.handleModalToggle()}
  >
    CREATE
  </div>
  ...
}