Reaccionar el enrutador y las rutas no funcionan, no pude navegar a la página de blogs. App.js: el siguiente fragmento de código contiene App.js y el enrutador. No pude usar el interruptor debido a la última versión de reaccionar js.
import './App.css'; import React,{Component} from 'react'; import { Navbar,Nav,Container,Row,Col,Button } from 'react-bootstrap'; import {Navigation} from './navbar/navbar.js'; import Luckywheel from './luckywheel/luckywheel'; import Luckymessage from './luckywheel/luckymessage'; import {Routes , Route , BrowserRouter as Routers} from 'react-router-dom' import Blogs from './tools/blogs'; function App() { return ( <div className="App"> <h1 className='heading'>LUCKY DRAWER</h1> <Routers> <Navigation /> <Luckywheel /> <Luckymessage /> <Routes> <Route path='blogs' component={Blogs} /> <Route path='/' exact component={App} /> </Routes> </Routers> </div> ); } export default App;Navbar.js: este archivo contiene el código de barras de navegación
import React ,{Component} from 'react'; import { Navbar,Nav,Container,NavDropdown, } from 'react-bootstrap'; export function Navigation () { return( <Navbar bg="dark" variant="dark"> <Container> <Navbar.Brand href='blogs'>Blogs</Navbar.Brand> <Navbar.Brand href='/'>Home</Navbar.Brand> </Container> </Navbar> ) } export default Navigation;En react-router-dom v6, la API del componente Route cambió significativamente. Ya no requiere accesorios de función de component render o children , todos reemplazados por un accesorio de un solo element que toma un ReactElement ( también conocido como JSX ).
declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactElement | null; index?: boolean; path?: string; }
Cambie de component a accesorio de element y pase el componente enrutado como JSX.
<Routes> <Route path='blogs' element={<Blogs />} /> <Route path='/' element={<App />} /> </Routes>Instale npm i react-router-dom@5.2.0 Para trabajar con el interruptor