![](/img/trans.png)
[英](react router v6) "Error: useNavigate() may be used only in the context of a <Router> component" error in hoc component
[英]React Router V6 - Error: useRoutes() may be used only in the context of a <Router> component
我已经安装了react-router-dom
V6-beta。 通过遵循网站上的示例,我可以使用新选项useRoutes
我已经设置了页面路由并将它们返回到App.js
文件中。
保存后出现以下错误:
错误:useRoutes() 只能在组件的上下文中使用。
我想知道我是否在这里遗漏了什么? 我在src/pages
文件夹中创建了页面。
我的代码:
import { BrowserRouter, Link, Outlet, useRoutes } from 'react-router-dom';
// Pages
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Gallery from './pages/Gallery';
import Prices from './pages/Prices';
import Contact from './pages/Contact';
const App = () => {
const routes = useRoutes([
{ path: '/', element: <Home /> },
{ path: 'o-nama', element: <About /> },
{ path: 'usluge', element: <Services /> },
{ path: 'galerija', element: <Gallery /> },
{ path: 'cjenovnik', element: <Prices /> },
{ path: 'kontakt', element: <Contact /> }
]);
return routes;
};
export default App;
它认为问题在于您仍然需要将routes
( Routes
/ useRoutes
)包装在Router
元素中。
所以一个例子看起来像这样:
import React from "react";
import {
BrowserRouter as Router,
Routes,
Route,
useRoutes,
} from "react-router-dom";
const Component1 = () => {
return <h1>Component 1</h1>;
};
const Component2 = () => {
return <h1>Component 2</h1>;
};
const App = () => {
let routes = useRoutes([
{ path: "/", element: <Component1 /> },
{ path: "component2", element: <Component2 /> },
// ...
]);
return routes;
};
const AppWrapper = () => {
return (
<Router>
<App />
</Router>
);
};
export default AppWrapper;
根据您的需要进行重构。
您应该在树的较高位置有一个<BrowserRouter>
(或任何提供的路由器)。 这样做的原因是<BrowserRouter>
提供了使用useRoutes()
创建路由时需要的历史上下文。 请注意,更高层意味着它不能在<App>
本身中,但至少在呈现它的组件中。
这是您的入口点的样子:
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
在 index.js 中提及以下代码
import { BrowserRouter as Router } from "react-router-dom";
它在你的 index js 或 App JS 中的意思是这样用 BrowserRouter 包装
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter> // Like This here I am using
<App />
</BrowserRouter>
</Provider>
</React.StrictMode>,
document.getElementById("root"),
);
代码:index.js
import {BrowserRouter as Router} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById("root")
);
应用程序.js
function App() {
return (
<>
<Routes>
<Route path ="/" element={<Main />} />
<Route path ="gigs" element={<Gigs />} />
</Routes>
</>
);
}
如果您想将所有内容都保留在您的 App 组件中
import { BrowserRouter, useRoutes } from "react-router-dom"; // v6 beta
import Home from './pages/Home';
const App = () => {
const Routes = () => useRoutes([{ path: "/", element: <Home /> }]);
return (
<BrowserRouter>
<Routes />
</BrowserRouter>
);
};
export default App;
只是想报告一个类似的问题——在撰写本文时(v6.2.1),如果您从react-router
而不是react-router-dom
导入,您似乎也确实遇到了这个错误。 对我来说是一个代价高昂的错字。
即,确保您从react-router-dom
导入Routes
和Route
而不是react-router
// This is deceptively valid as the components exist, but is not the intended usage
import { Routes, Route } from 'react-router';
// This works and is the intended usage
import { Routes, Route } from 'react-router-dom';
> Following codes works since react-router-dom syntax changed because of React 18.
import logo from './logo.svg';
import './App.css';
import Header from './components/Header';
import Login from './components/Login';
import {
BrowserRouter as Router,
Routes,
Route,
useRoutes,
} from 'react-router-dom';
import Signup from './components/Signup';
function AppRoutes() {
const routes = useRoutes(
[
{path:'/',element:<Login/>},
{path:'/signup',element:<Signup/>}
]
)
return routes;
}
function App(){
return (
<Router>
<Header/>
<AppRoutes />
</Router>
)
}
export default App;
尝试
const Routes = () => useRoutes([])
然后在 App.js 中像这样包装它
<BrowserRouter>
<Routes />
</BrowserRouter>
它对我有用
尝试在 index.js 中添加你的路由,而不是在 App.js 中。 您的 App.js 是从 index.js 调用的。 在 index.js 你的外部页面是这样调用的
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<Navbar />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.