React+TypeScript中react-router-dom的Link组件报错求助

问题描述 #

首次使用React结合TypeScript开发，引入react-router-dom的Link组件后页面直接崩溃。需求是在头部导航栏添加Home、About、Login三个选项实现页面跳转，直接修改URL可以正常切换页面，但使用Link标签就触发报错。

相关代码 #

App.jsx

import 'bootstrap/dist/css/bootstrap.min.css';

// --- component ---
import MainHeader from './components/MainHeader';
import MainFooter from './components/MainFooter';

// --- pages ---
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

// --- style ---
import './App.css';

function App() {
    return (
        <div className="App">
            <div className='sec-header'>
                <MainHeader />
            </div>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Home />}></Route>
                    <Route path="/about" element={<About />}></Route> 
                    <Route path="/contact" element={<Contact />}></Route> 
                </Routes>
            </BrowserRouter>
            <div className='sec-footer'>
                <MainFooter />
            </div>
        </div>
    );
}

export default App;

MainHeader.jsx

import './MainHeader.css'
import { Link } from 'react-router-dom'

function MainHeader() {

    return (
        <div className="p-3">
            <nav className="navbar navbar-expand">
                <ul className="rounded-4 d-flex m-auto p-0">
                    <li className="btn btn-header fs-5 p-0 py-2 px-4 mx-3 border-bottom rounded-0 w-100">
                        <Link to="/">Home</Link>
                    </li>
                    <li className="btn btn-header fs-5 p-0 py-2 px-4 mx-3 border-bottom rounded-0 w-100">
                        <Link to="/about">About</Link>
                    </li>
                    <li className="btn btn-header fs-5 p-0 py-2 px-4 mx-3 border-bottom rounded-0 w-100">
                        <Link to="/login">Login</Link>
                    </li>
                </ul>
            </nav>
        </div>
    )
}

export default MainHeader

控制台报错信息 #

• Uncaught Error: useHref() may be used only in the context of a <Router> component.
• react-dom.development.js:18687 The above error occurred in the <Link> component:

问题原因 #

Link组件依赖react-router-dom提供的**路由上下文（Router Context）**才能正常工作，当前代码中MainHeader组件渲染在<BrowserRouter>标签之外，导致Link无法获取到路由上下文，进而触发useHref()的错误。

修复方案 #

将<MainHeader>组件移到<BrowserRouter>内部，让它处于路由上下文的覆盖范围内。修改后的App.jsx代码如下：

import 'bootstrap/dist/css/bootstrap.min.css';

// --- component ---
import MainHeader from './components/MainHeader';
import MainFooter from './components/MainFooter';

// --- pages ---
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
// 记得导入Login页面组件
// import Login from './pages/Login';

// --- style ---
import './App.css';

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                {/* 将Header移到BrowserRouter内部 */}
                <div className='sec-header'>
                    <MainHeader />
                </div>
                <Routes>
                    <Route path="/" element={<Home />}></Route>
                    <Route path="/about" element={<About />}></Route> 
                    <Route path="/contact" element={<Contact />}></Route> 
                    {/* 补充Login页面的路由配置 */}
                    {/* <Route path="/login" element={<Login />}></Route> */}
                </Routes>
            </BrowserRouter>
            <div className='sec-footer'>
                <MainFooter />
            </div>
        </div>
    );
}

export default App;

额外提示：导航栏中配置了/login的跳转链接，但当前路由中没有对应的配置，记得补充Login页面组件及对应的路由规则，避免点击后出现404页面。

内容的提问来源于stack exchange，提问作者João Denari