React网页添加路由的最佳流程及link标签报错解决方案

一、当前报错修复 #

报错核心原因：你把react-router-dom提供的路由导航组件<Link>写成了HTML原生的<link>标签（小写）。原生<link>是void元素（无闭合标签、不能包含子内容），但你在里面写了Home这类文本，直接触发错误。

修复后的完整App组件代码：

import React from 'react';
import './App.css';
import Home from './Components/Home';
import About from './Components/About';
import Contact from './Components/Contact';
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className='App'>
        <ul>
          {/* 关键修正：将小写link改为大写的Link组件 */}
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About Us</Link></li>
          <li><Link to="/contact">Contact Us</Link></li>
        </ul>
      </div>
      <Routes>
        {/* React Router v6+ 无需exact属性，默认精确匹配根路径 */}
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

额外修正：你的index.js第11行存在语法错误，React 18+正确渲染写法示例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

二、React项目添加路由的最佳实现流程 #

1. 安装路由依赖 #

当前主流使用React Router v6版本，执行命令安装：

npm install react-router-dom
# 或用yarn
yarn add react-router-dom

2. 配置根路由容器 #

在项目入口文件（如index.js）中，用<BrowserRouter>包裹整个应用（若需要兼容静态部署场景，可替换为<HashRouter>），它会为整个应用提供路由上下文。

3. 创建页面组件 #

提前编写需要路由跳转的独立页面组件，比如Home、About、Contact，确保每个组件是标准的React函数/类组件。

4. 定义路由规则 #

在根组件（如App.js）中引入Routes和Route组件：

• <Routes>作为所有路由规则的容器，同一时间只会匹配渲染一个符合条件的<Route>
• <Route>通过path属性定义URL路径，element属性指定对应路径要渲染的组件

5. 添加导航链接 #

使用Link组件创建导航菜单，通过to属性指定跳转路径，它会实现无刷新的客户端路由跳转，替代原生<a>标签（避免页面重载）。

6. 进阶配置（可选） #

• 嵌套路由：若需要多级路由（如/about/team），可在父路由的element中添加<Outlet>组件作为子路由的渲染出口，再定义子<Route>
• 路由参数：通过path="/user/:id"定义带参数的路由，在目标组件中用useParams()钩子获取参数
• 路由守卫：通过Navigate组件或自定义高阶组件实现权限控制、路由跳转拦截

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