React中react-router-dom v6的Link组件无法正常工作求助

我在React中使用react-router-dom的Link组件编写了简单的页面跳转代码，但无法正常运行。

App组件代码 #

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import WellcomePage from './WellcomePage';
import BuyPage from './BuyPage';
import NewUserPage from './NewUserPage';

const App = () => {
  return (
    <div>
      <h1>My Trading App</h1>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/buy">Buy</Link>
          </li>
          <li>
            <Link to="/newuser">New User</Link>
          </li>
        </ul>
      </nav>
      <Router>
        <Routes>
          <Route exact path="/" caseSensitive={false} element={<WellcomePage/>} />
          <Route exact path="/buy" caseSensitive={false} element={<BuyPage/>} />
          <Route exact path="/newuser" caseSensitive={false} element={<NewUserPage/>} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

原index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

修改后的index.js代码 #

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

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

代码可编译成功，但页面报错，求解决方法。

解决方案 #

问题核心是Link组件没有被Router上下文包裹。你的App组件中，<nav>及内部的<Link>都在路由容器（<Router>或外层<BrowserRouter>）的作用范围之外，导致Link无法获取路由上下文，从而触发错误。

提供两种修复方式：

• 方式一：将导航栏移入Router内部

const App = () => {
  return (
    <Router>
      <div>
        <h1>My Trading App</h1>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/buy">Buy</Link>
            </li>
            <li>
              <Link to="/newuser">New User</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" caseSensitive={false} element={<WellcomePage/>} />
          <Route path="/buy" caseSensitive={false} element={<BuyPage/>} />
          <Route path="/newuser" caseSensitive={false} element={<NewUserPage/>} />
        </Routes>
      </div>
    </Router>
  );
};

注意：react-router-dom v6版本中，<Route>不再需要exact属性，默认即为精确匹配。

• 方式二：保留index.js的外层<BrowserRouter>，删除App内部的<Router>
  修改后的App组件：

import React from 'react';
import { Routes, Route, Link } from "react-router-dom";
import WellcomePage from './WellcomePage';
import BuyPage from './BuyPage';
import NewUserPage from './NewUserPage';

const App = () => {
  return (
    <div>
      <h1>My Trading App</h1>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/buy">Buy</Link>
          </li>
          <li>
            <Link to="/newuser">New User</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" caseSensitive={false} element={<WellcomePage/>} />
        <Route path="/buy" caseSensitive={false} element={<BuyPage/>} />
        <Route path="/newuser" caseSensitive={false} element={<NewUserPage/>} />
      </Routes>
    </div>
  );
};

export default App;

保持index.js的外层<BrowserRouter>不变，即可让整个App处于路由上下文覆盖范围内。

两种方法均可解决Link无法获取路由上下文的问题，实现正常页面跳转。

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