加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

React 中 Link 和 NavLink 组件 activeClassName、activeStyle

发布时间：2020-12-14 23:57:43 所属栏目：资源 来源：网络整理
导读：首先 导航链接应该使用?? ?而不再是?? ? ? ?使用方法见?https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md ? ?和?? ?一起使用的时候，会出现 激活链接样式（当前页面对应链接样式，通过 activeClas

首先 导航链接应该使用???而不再是???

??使用方法见?https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

??和???一起使用的时候，会出现 激活链接样式（当前页面对应链接样式，通过 activeClassName、activeStyle 设置） 不生效的情况。效果如下：

刷新页面后导航激活样式生效，点击导航链接的时候 url 跳转，但是导航激活样式不生效。

上图效果对应代码：

NavLink And PureComponent

<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">src<span style="color: #0000ff;">="https://unpkg.com/react@16/umd/react.development.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">src<span style="color: #0000ff;">="https://unpkg.com/react-dom@16/umd/react-dom.development.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">src<span style="color: #0000ff;">="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">src<span style="color: #0000ff;">="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">>

<span style="color: #0000ff;"><<span style="color: #800000;">style<span style="color: #0000ff;">><span style="background-color: #f5f5f5; color: #800000;">
.menu-link <span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">
display<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> inline-block<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;">
width<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 100px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;">
text-decoration<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> none<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;">
text-align<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> center<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;">
background<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> #dedede<span style="background-color: #f5f5f5; color: #000000;">;
<span style="background-color: #f5f5f5; color: #000000;">}<span style="background-color: #f5f5f5; color: #800000;">
.menu-link.active <span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">
background<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> tomato<span style="background-color: #f5f5f5; color: #000000;">;
<span style="background-color: #f5f5f5; color: #000000;">}
<span style="color: #0000ff;"></<span style="color: #800000;">style<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">head<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">id<span style="color: #0000ff;">="app"<span style="color: #0000ff;">></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/babel"<span style="color: #0000ff;">>
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> import ReactRouterDOM,{ HashRouter,Route } from 'react-router-dom';
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> import React,{ Component,PureComponent } from 'react';
<span style="background-color: #f5f5f5; color: #000000;">
const { HashRouter,Route,NavLink } <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> ReactRouterDOM;
const { Component,PureComponent } <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> React;

class Menu extends PureComponent {
  render() {
    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;return</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (
      </span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;NavLink className</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;menu-link</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt; activeClassName</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;active</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt; activeStyle</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{{color: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;#fff</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}} to</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/home</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span><span style="background-color: #f5f5f5; color: #000000;"&gt;首页</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;NavLink></span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;NavLink className</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;menu-link</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt; activeClassName</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;active</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt; activeStyle</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{{color: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;#fff</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}} to</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/help</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span><span style="background-color: #f5f5f5; color: #000000;"&gt;帮助页</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;NavLink></span>
      <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div></span>

<span style="background-color: #f5f5f5; color: #000000;"> );
}
}

class App extends PureComponent {
  render() {
    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;return</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (
      </span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;HashRouter</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;Menu </span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;Route path</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/home</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt; component</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{ () </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=></span> <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span><span style="background-color: #f5f5f5; color: #000000;"&gt;首页内容</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div> } </span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;Route path</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/help</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt; component</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{ () </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=></span> <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span><span style="background-color: #f5f5f5; color: #000000;"&gt;帮助页内容</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div> } </span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;div></span>
      <span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;HashRouter></span>

<span style="background-color: #f5f5f5; color: #000000;"> );
}
}

ReactDOM.render(
    </span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;App </span><span style="background-color: #f5f5f5; color: #000000;"&gt;/</span><span style="background-color: #f5f5f5; color: #000000;"&gt;>,</span>

<span style="background-color: #f5f5f5; color: #000000;"> document.getElementById(<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">app<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">)
);
<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

为什么不生效，我们在使用??? 之前应该知道 它相当于对组件的??? 和???进行浅比较，如果相等则不更新，以此来进行优化，防止多余更新。

而在上面的例子中 就相当于

.props,props === .props); console.log(state,.state,state === .state); !shallowEqual(props,.props) || !shallowEqual(state,render() {
<span style="color: #0000ff;">return<span style="color: #000000;"> (

<NavLink className="menu-link" activeClassName="active" activeStyle={{color: '#fff'}} to='/home'>首页
<NavLink className="menu-link" activeClassName="active" activeStyle={{color: '#fff'}} to='/help'>帮助页

其中浅比较函数??的实现（https://blog.csdn.net/juzipidemimi/article/details/80892440）

(x === x !== 0 || y !== 0 || 1 / x === 1 / x !== x && y !==<span style="color: #0000ff;">function<span style="color: #000000;"> shallowEqual(objA,objB) {
<span style="color: #0000ff;">if<span style="color: #000000;"> (is(objA,objB)) {
<span style="color: #0000ff;">return <span style="color: #0000ff;">true<span style="color: #000000;">;
}

<span style="color: #0000ff;">if<span style="color: #000000;"> (
<span style="color: #0000ff;">typeof objA !== 'object' ||<span style="color: #000000;">
objA === <span style="color: #0000ff;">null ||
<span style="color: #0000ff;">typeof objB !== 'object' ||<span style="color: #000000;">
objB === <span style="color: #0000ff;">null<span style="color: #000000;">
) {
<span style="color: #0000ff;">return <span style="color: #0000ff;">false<span style="color: #000000;">;
}

const keysA =<span style="color: #000000;"> Object.keys(objA);
const keysB =<span style="color: #000000;"> Object.keys(objB);

<span style="color: #0000ff;">if (keysA.length !==<span style="color: #000000;"> keysB.length) {
<span style="color: #0000ff;">return <span style="color: #0000ff;">false<span style="color: #000000;">;
}

<span style="color: #008000;">//<span style="color: #008000;"> Test for A's keys different from B.
<span style="color: #0000ff;">for (let i = 0; i < keysA.length; i++<span style="color: #000000;">) {
<span style="color: #0000ff;">if<span style="color: #000000;"> (
!hasOwnProperty.call(objB,keysA[i]) ||
!<span style="color: #000000;">is(objA[keysA[i]],objB[keysA[i]])
) {
<span style="color: #0000ff;">return <span style="color: #0000ff;">false<span style="color: #000000;">;
}
}

<span style="color: #0000ff;">return <span style="color: #0000ff;">true<span style="color: #000000;">;
}

所以组件???不会发生更新，所以其子组件???自然也就不会被更新。

那么该如果解决这个问题呢？

最简单的当然就是使用????替换????

如果不想更改??的话，可以通过给组件传入当前???作为属性来解决。

??是通过监听当前所在??来更新链接样式的，所以如果能在??改变的时候，更新组件就可以了，而做到这一点，只需要把???作为一个属性传入组件。

最简单的办法，把导航组件也作为一个 Route，并且能动态匹配所有路径，这样???会自动作为属性被注入到组件。

首页内容
} />
帮助页内容
} />

全文参考： https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

如果能帮助到你，点个赞呗

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同