React Router路由渲染异常 求排查修复方案

你遇到的这个警告和Link组件不渲染href的问题，核心原因很明确：你把React组件直接传给了Link的to属性——to需要接收的是路由路径字符串（比如"/"、"/about"），而不是组件对象（比如Dashboard、About）。手动输入地址能正常加载，是因为你的Route配置里path用的是正确的字符串路径，但Link的参数完全不符合React Router的要求，所以才抛出了类型错误警告。

下面是修改后的完整代码，同时我也做了一些现代化的优化（比如把类组件改成更简洁的函数组件，完善激活状态的管理）：

修改后的 Routes.jsx #

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';
import Blog from './Blog';

const Routes = () => {
  // 用useState管理当前激活的路由项，初始默认选中Dashboard
  const [activeRoute, setActiveRoute] = useState('dashboard');

  // 点击Link时更新激活状态的回调函数
  const handleLinkClick = (routeName) => {
    setActiveRoute(routeName);
  };

  return (
    <Router>
      <div>
        <nav>
          <ul className="block-group">
            <li className={activeRoute === 'dashboard' ? 'active' : ''}>
              <Link 
                to="/" 
                onClick={() => handleLinkClick('dashboard')}
              >
                Dashboard
              </Link>
            </li>
            <li className={activeRoute === 'about' ? 'active' : ''}>
              <Link 
                to="/about" 
                onClick={() => handleLinkClick('about')}
              >
                About
              </Link>
            </li>
            <li className={activeRoute === 'blog' ? 'active' : ''}>
              <Link 
                to="/blog" 
                onClick={() => handleLinkClick('blog')}
              >
                Blog
              </Link>
            </li>
          </ul>
        </nav>
        <Route exact path="/" component={Dashboard} />
        <Route path="/about" component={About} />
        <Route path="/blog" component={Blog} />
      </div>
    </Router>
  );
};

export default Routes;

• 修正Link的to属性：把原来的to={Dashboard}改成to="/"，to={About}改成to="/about"，to={Blog}改成to="/blog"——完全匹配Route里定义的path字符串，这是解决问题的核心。
• 优化组件写法：把类组件改成函数组件，搭配useState管理激活状态，这是React现在更推荐的写法，代码更简洁易读，也避免了类组件的冗余代码。
• 完善激活状态切换：原来的this.state.active一直固定为"active"，现在通过点击事件动态更新激活的路由项，让导航栏的UI反馈更准确。

如果你使用的是React Router v6+版本，建议进一步升级路由写法（比如用<Routes>替代外层容器，Route的component属性换成element={<Dashboard />}），不过上面的修改在v5版本中可以完全正常工作。

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