React中使用NavLink报错：useLocation()需在<Router>上下文内

问题 #

添加NavLink组件后出现错误：useLocation() may be used only in the context of a <Router> component，移除NavLink项目正常运行，导航栏跳转时触发该错误。

错误原因 #

你的Layouts组件中，Header组件在Routers组件外部，而Routers里的<Router>只包裹了<Routes>部分。Header中的NavLink没有被<Router>组件包裹，无法获取路由上下文，因此调用useLocation()（NavLink内部依赖这个钩子）时触发错误。

解决方案 #

将<Router>的作用范围扩大，让Header、路由内容、Footer都处于路由上下文之中。具体步骤：

1. 调整Layouts组件，引入Router并包裹整个页面结构
2. 修改原Routers组件，移除内部的Router，仅保留路由规则
3. 补全Header中NavLink的to属性

修改后的代码示例 #

1. Layouts组件（更新后） #

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
import RoutersContent from '../../Routers/RoutersContent';

const Layouts = () => {
  return (
    <Router>
      <Header />
      <div><RoutersContent /></div>
      <Footer />
    </Router>
  )
}

export default Layouts

2. RoutersContent组件（原Routers组件修改后） #

import { Routes, Route } from 'react-router-dom';
import React from 'react';
import Home from './Pages/Home/Home';
import Shop from './Pages/Shop/Shop';
import Cart from './Pages/Cart/Cart';
import Checkout from './Pages/Checkout/Checkout';
import Login from './Pages/Login/Login';
import ProductDetail from './Pages/ProductsDetail/ProductDetails';
import Signup from './Pages/Signup/Signup';


const RoutersContent = () => {
  return (
    <Routes>
      <Route exact path='/' index element={<Home />}/>
      <Route path='/shop' element={<Shop />} />
      <Route path='/shop/:id' element={<ProductDetail />}/>
      <Route path='/cart' element={<Cart />}/>
      <Route path='/checkout' element={<Checkout />}/>
      <Route path='/login' element={<Login />}/>
      <Route path='/signup' element={<Signup />}/>
    </Routes>
  )
}

export default RoutersContent

3. Header组件（补全NavLink的to属性） #

import React from 'react';
import { NavLink } from 'react-router-dom';
import { Container, Row } from 'reactstrap';
import Logo from '../../assets/images/logo.png';
import './header.styles.css'

const Header = () => {
  return (
    <header className='header'>
      <Container>
        <Row>
          <div className="nav_wrapper">
            <div className="logo">
              <img src={Logo} alt="logo" />
              <div>
                <h1>Excellence E-commerce</h1>
              </div>
            </div>
            <div className="navigation">
              <div className="menu">
                <ul className="menu">
                  <li className="nav__items">
                    <NavLink to="/">Home</NavLink>
                  </li>
                  <li className="nav_items">
                    <NavLink to="/shop">Shop</NavLink>
                  </li>
                  <li className="nav_items">
                    <NavLink to="/cart">Cart</NavLink>
                  </li>
                </ul>
              </div>
            </div>

            {/* <div className="nav__icons">
              <span className="cart__icon"></span>
            </div> */}

          </div>
        </Row>
      </Container>
    </header>
  )
};

export default Header

额外说明 #

• 确保所有使用react-router-dom路由相关组件（如NavLink、Link、useLocation等）的组件都被<Router>包裹
• 路由路径建议统一使用绝对路径（带前缀/），避免嵌套路由时出现路径错误

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