您不能在<Router>另一个 <Router>.你的应用中永远不应该有多个 Reactjs

Question

伙计们，我的App.js:中有这段代码

return (
<div className="App">


<Routes>
<Route path="/" element={<Index />} />

<Route path="/404" element={<Err404 />} />
<Route path="/contact" element={<Contact />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />

</Routes>
</div>
);

我在index.js中添加了BrowserRouter，如下所示：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './pages/App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

但我仍然在标题中看到了这个错误。

Answer 1

您可以检查Route中的所有组件吗？

<Index />
<Err404 />
<Contact />}
<Register />
<Login />} />

似乎其中一个包含Router或BrowserRouter等组件。

[更新]-如果您感兴趣，这是代码库中出现错误的行-https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/components.tsx#L181

它检查您的路由器组件(例如BrowserRouter(是否是在另一个路由器组件的上下文中创建的，并抛出此错误