使用React Link组件替换a标签时DOM消失的问题排查

问题背景 #

我是前端开发新手，正在学习React和react-router-dom库。原本程序能正常渲染，但添加Link组件后DOM就不再显示。把<Link to="/mflix" className="nav-link">Movies</Link>替换成普通a标签后，页面又能正常渲染，但我想使用Link组件避免页面刷新。

尝试过把to的写法改成字符串形式，问题依旧。查阅react-router-dom v5文档，路径支持字符串或对象格式，所以写法没问题。

原代码 #

import React from "react"
import {Routes, Route, Link} from "react-router-dom"
import Mflix from "./components/mflix.js"

function App(){
  return (
    <div className="App">
      <nav className="navbar navbar-expand navbar-dark bg-dark">
        <a href="/mflix" className="navbar-brand"> {/*href links to "/mflix" route */}
         Mflix Reviews
        </a>
        <div className="navbar-nav mr-auto">
          <li className="nav-item">
           <Link to={"/mflix"} className="nav-link">
            Movies
           </Link>
          </li>
        </div>
      </nav>
    </div>
  )
}

控制台报错（翻译后） #

上述错误发生在<Link>组件中：

LinkWithRef@http://localhost:3000/static/js/bundle.js:37314:9
li
div
nav
div
App@http://localhost:3000/static/js/bundle.js:40:72

考虑在组件树中添加错误边界来自定义错误处理行为。

解决方法 #

核心问题是Link组件必须在Router上下文环境中才能使用，你的代码里没有用任何Router容器（比如BrowserRouter）包裹App组件，导致Link无法获取路由上下文，引发渲染错误。

步骤1：用BrowserRouter包裹App组件 #

在项目的入口文件（通常是index.js）中，导入BrowserRouter并包裹整个App：

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>
);

步骤2：完善路由配置（可选但必要） #

确保你的路由规则（Routes和Route）正确配置，让Link跳转的路径能对应到组件：

import React from "react"
import {Routes, Route, Link} from "react-router-dom"
import Mflix from "./components/mflix.js"

function App(){
  return (
    <div className="App">
      <nav className="navbar navbar-expand navbar-dark bg-dark">
        {/* 建议把a标签也换成Link，保持统一 */}
        <Link to="/mflix" className="navbar-brand">
          Mflix Reviews
        </Link>
        <div className="navbar-nav mr-auto">
          <li className="nav-item">
            <Link to="/mflix" className="nav-link">
              Movies
            </Link>
          </li>
        </div>
      </nav>
      {/* 配置路由映射 */}
      <Routes>
        <Route path="/mflix" element={<Mflix />} />
      </Routes>
    </div>
  )
}

export default App;

原理说明 #

BrowserRouter是react-router-dom提供的路由上下文容器，所有依赖路由功能的组件（Link、Routes、Route等）都必须在它的包裹范围内，才能获取到路由相关的上下文信息，否则会抛出错误导致页面渲染失败。

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