reactjs 我在使用react-router-dom版本6时遇到问题[重复]

v64noz0r  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(138)

此问题在此处已有答案

isActive style in react-router v.6(2个答案)
6小时前关门了。
这里是问题,首先这个项目是使用vite生成的。我有一个错误,说Warning: React does not recognize the activeStyle prop on a DOM element。这是错误的前几行。当我从react-router-dom在NavLink组件中添加activeStyle prop时,我的问题出现了,这应该是它的内置prop,但是react不认为它是有效的prop,怎么会这样?你知道发生了什么事吗?
下面是项目中包含错误的组件:

标题.jsx

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

const Header = () => {
  return (
    <div className="header">
      <NavLink to="/" activeStyle={{ fontWeight: "bold", color: "red" }}>
        Home
      </NavLink>

      <NavLink to="/about" activeStyle={{ fontWeight: "bold", color: "red" }}>
        About
      </NavLink>
    </div>
  );
};

export default Header;

维生素配置js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import sass from "sass";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  css: {
    preprocessorOptions: {
      sass: {
        implementation: sass,
      },
    },
  },
});

控制台错误快照:

jchrr9hc

jchrr9hc1#

这里没有activeStyle属性,但是有一个常规的样式属性,它的行为与常规组件中的不同,在常规组件中,你可以将样式对象传递给它
它的工作原理与navlink组件略有不同,因为它作为渲染 prop 工作,您将传递回调函数,navlink组件将负责样式化您可以从这里阅读更多关于它的信息https://reactrouter.com/en/main/components/nav-link
下面是一个示例

const styles = {
    fontWeight: "bold",
    textDecoration: "underline",
    color: "#161616",
  };


<nav className="header-nav">
        <NavLink
          style={({ isActive }) => (isActive ? styles : null)}
          to="/Host"
        >
          Host
        </NavLink>

同样默认情况下,当一个活动类处于活动状态时,它会被添加到一个组件中,这样你就可以使用CSS来设置它的样式。

.header-nav a.active {
font-weight: bold;
text-decoration: underline;
color: #161616; }

相关问题