React18使用react-router-dom时出现无效钩子及BrowserRouter错误

我使用React v18，已安装react-router-dom、react-social-login依赖包。编写App.js、Login.js、Home.js及Index.js代码后运行程序，控制台报错，Home和Login组件无法正常渲染。

代码详情 #

App.js

import React from 'react';
import Home from './container/Home';
import Login from './components/Login';

import { Route, Routes} from "react-router-dom";
 
const App = () => {
        return(  
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='/login' element={<Login />} />                    
                </Routes>
        );
}

export default App;

Login.js

import React from 'react'

const Login = () => {
  return (
    <div>
      <h1>Login</h1>
    </div>
  );
}

export default Login;

Home.js

import React from 'react'

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  )
}

export default Home;

Index.js

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

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

解决方案 #

1. 核对组件导入路径
   检查项目目录结构：

   • 确认根目录下存在container文件夹，且Home.js位于其中；
   • 确认根目录下存在components文件夹，且Login.js位于其中。
     若路径不匹配，修改导入语句中的路径，或调整文件所在文件夹。

2. 确保react-router-dom版本正确
   你的代码采用了react-router-dom v6的语法（<Routes>和element属性），如果安装的是v5版本会报错。执行以下命令安装适配React v18的最新版：

   npm uninstall react-router-dom
   npm install react-router-dom@latest
   

3. 依据控制台报错精准排查
   查看控制台具体错误信息：

   • 若提示Module not found，直接对应路径问题；
   • 若提示钩子调用无效或路由语法错误，检查React与react-router-dom的版本兼容性，React v18必须搭配react-router-dom v6及以上版本。

内容的提问来源于stack exchange，提问作者billy b