Question

我想添加活动类，该活动中的路由器是活动的。我开始学习反应，因此我需要一些帮助。我需要在 li 元素中而不是在 Link 元素上添加类。

<ul className="list-unstyled">
    <li className={RouteHelper("/")}> <Link to="/"> <FaHome /> Home </Link> </li>
    <li className={RouteHelper("/tables")}><Link to="tables"> <FaTable />Tables </Link></li>
</ul>

这是正在激活类的函数

const RouteHelper = (url) => {
    return window.location.pathname === url ? "active" : null;
}
export default RouteHelper;

Answer 1

我认为您需要创建一个CustomLink。这是来自React-Router docs的代码。

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

const CustomLinkExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <ListItemLink activeOnlyWhenExact={true} to="/">
            <FaHome /> Home
          </ListItemLink>
          <ListItemLink activeOnlyWhenExact={true} to="/tables" label="Tables">
            <FaTable />
            Tables
          </ListItemLink>
        </ul>

        <hr />
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/tables" component={Tables} exact />
        </Switch>
      </div>
    </Router>
  );
};

const ListItemLink = ({ to, activeOnlyWhenExact, children }) => {
  return (
    <Route
      path={to}
      exact={activeOnlyWhenExact}
      children={({ match }) => (
        <li className={match ? 'active' : ''}>
          <Link to={to}>{children}</Link>
        </li>
      )}
    />
  );
};

const Home = () => {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
};

const Tables = () => {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
};

以下是工作代码：https://codesandbox.io/s/reactrouter-62rye

react-router v4中的自定义活动链接

1 个答案: