react-router中Link与NavLink点击无响应及href警告问题

1. 消除无障碍警告 #

你看到的「The href attribute requires a valid value to be accessible」警告，是因为Navbar里的Logo用了空href的<a>标签：

<a className='ui teal inverted segment' href=""></a>

空href不符合网页无障碍标准，直接改成有效路径就行，或者用react-router的Link组件替代（推荐，保持单页应用的导航逻辑）：

// 方法一：给a标签加有效href
<a className='ui teal inverted segment' href="/">Mateo</a>

// 方法二：用Link组件替换a标签
<Link className='ui teal inverted segment' to="/">Mateo</Link>

2. 修复按钮点击不跳转的问题 #

现在点击按钮没反应，是因为你把Link/NavLink写成了空标签，导航文本放在了标签外面——点击按钮时触发的是按钮本身，不是导航链接。得把文本放进Link/NavLink里面：

修改后的Navbar代码：

import React from 'react'
import {Link, NavLink} from 'react-router-dom';

const Navbar = () => {
  return (
    <nav className='ui raised very padded segment'>
      <Link className='ui teal inverted segment' to="/">Mateo</Link>
      <div className='ui right floated header'>
        <button className='ui button'>
          <Link to="/">Home</Link>
        </button>
        <button className='ui button'>
          {/* 注意路径大小写要和App.js里的Route一致，App里是'about'，这里用'/about' */}
          <NavLink to="/about">About</NavLink>
        </button>
        <button className='ui button'>
          <NavLink to="/contact">Contact</NavLink>
        </button>
      </div>
    </nav>
  )
}

export default Navbar

另外，如果你觉得按钮包裹Link有点冗余，也可以直接给Link加按钮的className，这样更简洁：

<Link className='ui button' to="/">Home</Link>
<NavLink className='ui button' to="/about">About</NavLink>
<NavLink className='ui button' to="/contact">Contact</NavLink>

这样改完之后，警告会消失，点击导航项也能正常切换URL和页面内容了。

内容的提问来源于stack exchange，提问作者mateo ghidini