He estado tratando de usar un enrutador en el proyecto de reacción pero recibo un error:
Una ruta solo se debe usar como elemento secundario del elemento Rutas, nunca se representa directamente. Envuelva su ruta en una ruta.
El código se muestra a continuación
import About from "./container/About"; import Profile from "./container/Profile"; import { useState } from "react"; import {BrowserRouter as Routes,Route} from 'react-router-dom' function App(){ const [state, setState] = useState('') return( <div className="App"> <button onClick={()=>setState('about')}>About</button> <button onClick={()=>setState('profile')}>Profile</button> <Routes> <Route component={About} path='/about'></Route> </Routes> </div> ) } export default App;No estoy seguro de que pueda llamar al componente BrowserRouter de la forma en que lo hizo en su código. Tal vez si envuelve su código en el enrutador, de manera que sea el padre superior, como este ejemplo y muestra sus botones dentro de él, entonces debería funcionar bien.
Si está en la versión 6 de react-router-dom , debe nombrar los accesorios de manera diferente:
<Route element={About} path='/about'></Route>
En la versión 5, se denominó component .
Supongo que está en la versión 6, porque no recuerdo que la versión 5 tenga el componente Routes . Además, debe importar los componentes de manera diferente y envolver todo con el BrowserRouter.
import About from "./container/About"; import Profile from "./container/Profile"; import { useState } from "react"; import {BrowserRouter, Routes, Route} from 'react-router-dom' function App(){ const [state, setState] = useState('') return( <BrowserRouter> <div className="App"> <button onClick={()=>setState('about')}>About</button> <button onClick={()=>setState('profile')}>Profile</button> <Routes> <Route element={<About />} path='/about'></Route> </Routes> </div> </BrowserRouter> ) } export default App;Poner la ruta antes del componente.
<Route path='/about' element={About}></Route>También ,
Envuelva su archivo index.js con BrowserRouter
<BrowserRouter> <App/> </BrowserRouter>