React Router实现给li列表项添加active类的方案求助

我来帮你搞定这个需求！要把active类加到<li>元素上而不是默认的<Link>（也就是渲染后的<a>），我们可以利用React Router提供的路由状态工具来判断当前路径，动态给<li>添加类名。

核心思路 #

通过useLocation钩子（函数组件场景）或者withRouter高阶组件（类组件场景）获取当前页面的路由路径，然后对比每个<li>对应的目标路径，匹配时就给<li>加上active类。

函数组件解决方案（适配你的代码） #

你的Content是函数组件，我们可以用useLocation来实现：

首先更新导入，加入useLocation：

import React from 'react'; 
import { BrowserRouter as Router, Route, Link, Redirect, Switch, useLocation } from "react-router-dom";

然后修改Content组件的代码，添加路径判断逻辑：

const Content = () => {
  // 获取当前路由信息
  const location = useLocation();

  // 辅助函数：判断当前路径是否匹配目标路径
  const isActive = (targetPath) => location.pathname === targetPath;

  return (
    <Router>
      <div className="content">
        <div className="navigation">
          <ul>
            {/* 给每个li动态添加active类 */}
            <li className={isActive("/app") ? "active" : ""}>
              <Link to="/app">Wallets</Link>
            </li>
            <li className={isActive("/backup") ? "active" : ""}>
              <Link to="/backup">Backup</Link>
            </li>
            <li className={isActive("/keys") ? "active" : ""}>
              <Link to="/keys">Private keys</Link>
            </li>
            <li className={isActive("/security") ? "active" : ""}>
              <Link to="/security">Security</Link>
            </li>
            <li>
              <a href="/" target="_blank">How it works</a>
            </li>
          </ul>
        </div>
        <div className="wrapper">
          <Switch>
            <Route path="/app" component={App} />
            <Route path="/backup" component={Backup} />
            <Route path="/keys" component={Keys} />
            <Route path="/security" component={Security} />
            <Redirect to="/app" />
          </Switch>
        </div>
      </div>
    </Router>
  );
};

// 假设你有App、Backup等组件的定义
const App = () => <div>Wallets Page</div>;
const Backup = () => <div>Backup Page</div>;
const Keys = () => <div>Private Keys Page</div>;
const Security = () => <div>Security Page</div>;

export default Content;

类组件解决方案（如果后续需要） #

如果你的组件是类组件，可以用withRouter高阶组件注入路由信息：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect, Switch, withRouter } from "react-router-dom";

class Content extends Component {
  // 判断路径是否匹配的方法
  isActive = (targetPath) => this.props.location.pathname === targetPath;

  render() {
    return (
      <Router>
        <div className="content">
          <div className="navigation">
            <ul>
              <li className={this.isActive("/app") ? "active" : ""}>
                <Link to="/app">Wallets</Link>
              </li>
              {/* 其他li元素同理 */}
            </ul>
          </div>
          {/* 路由部分保持不变 */}
        </div>
      </Router>
    );
  }
}

// 用withRouter包装组件，注入location等路由props
export default withRouter(Content);

说明 #

这样修改后，当你跳转到对应路由时，对应的<li>就会自动加上active类，完全符合你想要的<li class="active"><a href="">Item</a></li>的效果。

内容的提问来源于stack exchange，提问作者eatmailyo