He instalado react-router-dom V6-beta. Siguiendo el ejemplo de un sitio web, puedo usar la nueva opción useRoutes . Tengo rutas de página de configuración y las devuelvo en el archivo App.js
Después de guardar me sale el siguiente error:
Error: useRoutes() solo se puede usar en el contexto de un componente.
Me pregunto si me estoy perdiendo algo aquí. He creado las páginas dentro de la carpeta src/pages .
Mi código:
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;Creo que el problema es que aún necesita envolver routes ( Routes / useRoutes ) dentro de un elemento de Router .
Así que un ejemplo se parece a esto:
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;Refactoriza según tus necesidades.
Mencione el siguiente código en index.js
import { BrowserRouter as Router } from "react-router-dom";significa en Your index js O App JS wrap con BrowserRouter como este
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"), );Debería tener un <BrowserRouter> (o cualquiera de los enrutadores proporcionados ) más arriba en el árbol. La razón de esto es que <BrowserRouter> proporciona un contexto de historial que se necesita en el momento en que se crean las rutas usando useRoutes() . Tenga en cuenta que más arriba significa que no puede estar en la <App> en sí, pero al menos en el componente que la representa.
Así es como podría verse su punto de entrada:
import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root'), );Código: index.js
import {BrowserRouter as Router} from "react-router-dom"; ReactDOM.render( <React.StrictMode> <Router> <App /> </Router> </React.StrictMode>, document.getElementById("root") );aplicación.js
function App() { return ( <> <Routes> <Route path ="/" element={<Main />} /> <Route path ="gigs" element={<Gigs />} /> </Routes> </> ); }> 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;Solo quiero informar sobre un problema similar: al momento de escribir (v6.2.1), parece que también encuentra este error si está importando desde react-router en lugar de react-router-dom . Un error tipográfico costoso de mi parte.
Es decir, asegúrese de importar Routes y Route desde react-router-dom y NO 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';