使用useNavigate报错：需在<Router>上下文，已用BrowserRouter仍未解决

测试时出现如下错误：

console.error Error: Uncaught [Error: useNavigate() may be used only in the context of a <Router> component.]

已按方案使用BrowserRouter，但错误依旧，相关代码如下：

index.js 代码 #

import React from 'react';
import {BrowserRouter} from 'react-router-dom';
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>
        <BrowserRouter>
            <App/>
        </BrowserRouter>,
    </React.StrictMode>
);

App.js 代码 #

import {Routes, Route} from 'react-router-dom';
import CharacterList from './components/CharacterList/CharacterList';
import CharacterDetail from './components/CharacterDetail/CharacterDetail';

function App() {
    return (
        <Routes>
            <Route path="/" element={<CharacterList/>}/>
            <Route path="/character/:id" element={<CharacterDetail/>}/>
        </Routes>
    );
}

export default App;

注：CharacterList和CharacterDetail组件中均使用了useNavigate。

解决思路 #

• 核对react-router-dom版本与导入路径：确保项目使用react-router-dom v6版本，所有路由相关API（包括useNavigate）都从react-router-dom导入，不要混用react-router包，版本不一致会导致路由上下文不匹配。
• 检查组件渲染场景：如果是测试用例中出现错误，大概率是直接渲染了CharacterList或CharacterDetail却未用BrowserRouter包裹。测试时需给组件套上路由上下文，示例：

  import { render } from '@testing-library/react';
  import { BrowserRouter } from 'react-router-dom';
  import CharacterList from './CharacterList';
  
  test('renders character list', () => {
    render(
      <BrowserRouter>
        <CharacterList />
      </BrowserRouter>
    );
  });
  

• 排查重复Router实例：确认项目中未在其他位置重复渲染BrowserRouter（比如App组件内部或嵌套组件中），多个Router实例会引发上下文冲突，导致useNavigate无法识别正确的路由环境。
• 临时禁用StrictMode测试：虽然React.StrictMode本身不会触发该错误，但它的重复渲染机制可能暴露初始化阶段的异常。可暂时去掉React.StrictMode包裹，验证错误是否消失，以此排查潜在问题。

内容的提问来源于stack exchange，提问作者Dominika Es