Question

我现在正在学习 ReactJS ，我读了很多关于这篇文章的主题，但我找不到适合我的问题的解决方案。

我想将active类添加到li项而不是a，例如

<li class="active"><a href="">Item</a></li>

不

<li><a href="" class="active">Item</a></li>

这是我的reactJS代码

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

const Content = () => (
  <Router>
    <div className="content">
        <div className="navigation">
            <ul>
                <li>
                    <Link to="/app">Wallets</Link>
                </li>
                <li>
                    <Link to="/backup">Backup</Link>
                </li>
                <li>
                    <Link to="/keys">Private keys</Link>
                </li>
                <li>
                    <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>
);

...

export default Content;

Answer 1

您可以使用NavLink，它具有活动链接的属性：

import { NavLink } from 'react-router-dom';

后：

<ul>
 <li>
  <NavLink to="YOUR_ROUTE" exact activeClassName="link-active">
   { YOUR_CONTENT }
  </NavLink>
 </li>
</ul>

现在，您的活动链接将具有链接活动类名称。

Answer 2

activeClassName className a在其路由处于活动状态时接收。默认情况下没有活动类。

https://knowbody.github.io/react-router-docs/api/Link.html

React - 将Active类添加到列表项react-router

2 个答案: