Question

<NavLink>不在相应页面上添加活动类。我检查了React Router docs，尝试在路径后添加/，使用activeClassName和activeStyle exact属性。例如，当我在http://localhost:3000/animals页面上时，<NavLink to={"/animals"} >没有任何“活动”类。我在控制台中看不到任何更改。我相信有一些简单的方法，但是我找不到解决方案。任何帮助将不胜感激。

这是一段代码：

app.js：

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
...  
import Header from "../header/header";
...
<Router>
 <main>
    <Header />
       <Switch>
         <Route path="/" exact>
           <HomePage />
         </Route>
         <Route path="/animals" exact>
           <AnimailsPage />
          </Route>
...

header.js：

import React from "react";
import Menu from "../menu/menu";
...
<nav>
  ...
  <Menu />
  ...
</nav>
...

菜单js：

import React from "react";
import {NavLink} from "react-router-dom";

  const Menu = () => {
    return(
      <ul className={"menu"}>
        <li className={"menu__item"}>
          <NavLink to={"/"} className={"menu__link"} exact>All</NavLink>
        </li>
        <li className={"menu__item"}>
          <NavLink to={"/animals"} className={"menu__link"}>Animals</NavLink>
        </li>
        ...

这是软件包的版本：

反应16.11.0

反应路线5.1.2

react-router-dom 5.1.2

React Router <NavLink>没有添加活动类

0 个答案: