[英]React router error "useRoutes() may be used only in the contect of a <Router> component."
So, I was making this website when I saw these BIG red errors in the console ( I know a nightmare:( ) The error said this:所以,当我在控制台中看到这些大红色错误时,我正在制作这个网站(我知道这是一场噩梦:()错误是这样说的:
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
And I didn't even use a "useRoutes" hook.而且我什至没有使用“useRoutes”钩子。 Anyways here's my code:
无论如何,这是我的代码:
import Links from "./components/Links"
import Addition from "./pages/Addition"
import "./styles/App.css"
import { BrowserRouter as Router, Switch, Route, Routes } from 'react-router-dom';
function App() {
return (
<div>
<h1>Chose your operation:</h1>
<div className="cards">
<Routes>
<Route path="/addition" element={Addition} />
</Routes>
</div>
</div>
)
}
export default App;
The Routes
component uses the useRoutes
. Routes
组件使用useRoutes
。 Routes
needs to be rendered within a routing context provided by a router component. Routes
需要在路由器组件提供的路由上下文中呈现。
Additionally the Addition
( sorry, no pun intended ) needs to be passed to the element
prop as JSX .此外,
Addition
(抱歉,没有双关语)需要作为 JSX传递给element
属性。 This was one of the breaking changes in the Route
component API from v5 to v6.这是
Route
组件 API 从 v5 到 v6 的重大更改之一。
Example:例子:
import Links from "./components/Links"
import Addition from "./pages/Addition"
import "./styles/App.css"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Router> // <-- render app into Router component
<div>
<h1>Chose your operation:</h1>
<div className="cards">
<Routes>
<Route
path="/addition"
element={<Addition />} // <-- passed as JSX
/>
</Routes>
</div>
</div>
</Router>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.