引入react-router-dom的Link标签后页面空白，JavaScript未加载求助

问题描述 #

添加react-router-dom的Link标签后，网页完全不显示任何内容（React的JavaScript未加载），但直接在网站URL后加上组件路径（如www.mysite.org/store）时，所有组件都能正常加载。使用react-router-dom V6.4.3版本，尝试过多种to属性路径格式均无效：

• <Link to="/store">Store</Link>
• <Link to="store">Store</Link>
• <Link to="../store">Store</Link>

原代码 #

import { BrowserRouter,Routes,Route,Link } from 'react-router-dom';
import './App.css';
import Checkout from './Components/Checkout';
import Home from './Components/Home';
import Store from './Components/Store';


function App() {
  return (
    <div className="App">
      <Link to="/store">store</Link>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/store" element={<Store/>} />
          <Route path="/checkout" element={<Checkout/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

解决方案 #

问题核心是Link组件必须放在Router组件（如BrowserRouter）内部。React Router的Link依赖Router提供的上下文环境，当Link在Router外部时，会触发错误导致整个React应用渲染失败，进而出现页面空白。

只需将Link标签移到BrowserRouter内部即可：

import { BrowserRouter,Routes,Route,Link } from 'react-router-dom';
import './App.css';
import Checkout from './Components/Checkout';
import Home from './Components/Home';
import Store from './Components/Store';


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* 将Link移入BrowserRouter内部 */}
        <Link to="/store">store</Link>
        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/store" element={<Store/>} />
          <Route path="/checkout" element={<Checkout/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

如果需要将导航部分抽成独立组件，确保该组件被Router包裹，或者在组件内部使用Link时，整个组件处于Router的上下文范围内。

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