面试题：React中Link与NavLink在样式设置上的区别

Question

在React Router中，阐述Link和NavLink在为导航元素设置样式方面有哪些不同点？请举例说明如何利用这些特性实现选中导航项时有特殊样式。

Answer 1

不同点

1. Link：
   • Link 组件仅用于创建导航链接，没有内置的用于检测当前链接是否处于激活状态（即是否是当前显示页面的链接）的功能，因此不能直接基于链接的激活状态来设置样式。它只是提供了导航到指定路径的基本功能。
2. NavLink：
   • NavLink 继承自 Link，在 Link 的基础上增加了检测当前链接是否激活的能力。当链接对应的路径与当前 URL 匹配时（可通过 exact 等属性控制匹配规则），会自动添加特定的类名（默认为 active，可自定义），可以基于此为激活状态的导航项设置不同样式。

实现选中导航项特殊样式示例

1. 使用 NavLink：

   import React from'react';
   import { BrowserRouter as Router, NavLink } from'react-router-dom';
   
   const App = () => {
     return (
       <Router>
         <div>
           <NavLink
             to="/home"
             activeClassName="selected"
             style={{ marginRight: '10px' }}
           >
             Home
           </NavLink>
           <NavLink
             to="/about"
             activeClassName="selected"
             style={{ marginRight: '10px' }}
           >
             About
           </NavLink>
           <style>{`
            .selected {
               color: red;
               font - weight: bold;
             }
           `}</style>
         </div>
       </Router>
     );
   };
   
   export default App;
   

   在上述代码中，NavLink 的 activeClassName 属性指定了当链接激活时添加的类名 selected，然后通过 CSS 为 selected 类设置了红色字体和加粗样式。

2. 使用 Link 模拟选中样式（较为复杂）：

   import React, { useState } from'react';
   import { BrowserRouter as Router, Link } from'react-router-dom';
   
   const App = () => {
     const [currentPath, setCurrentPath] = useState('/home');
     const handleClick = (path) => {
       setCurrentPath(path);
     };
   
     return (
       <Router>
         <div>
           <Link
             to="/home"
             style={{
               marginRight: '10px',
               color: currentPath === '/home'? 'red' : 'black',
               fontWeight: currentPath === '/home'? 'bold' : 'normal'
             }}
             onClick={() => handleClick('/home')}
           >
             Home
           </Link>
           <Link
             to="/about"
             style={{
               marginRight: '10px',
               color: currentPath === '/about'? 'red' : 'black',
               fontWeight: currentPath === '/about'? 'bold' : 'normal'
             }}
             onClick={() => handleClick('/about')}
           >
             About
           </Link>
         </div>
       </Router>
     );
   };
   
   export default App;
   

   这里通过 useState 来记录当前点击的路径，然后在 Link 的 style 中根据当前路径判断是否应用选中样式，相比 NavLink 实现起来更繁琐。