Soy nuevo en Reaccionar. Es mi primer programa con React - Router Cuando uso React-Router No aparece ningún dato en la ventana. Solo muestra la página en blanco.
Mi código - perfil.js
import React from 'react' function Profile() { return ( <div> <h1>profile</h1> </div> ) } export default Profileacerca del archivo.js
import React from 'react' function About() { return ( <div> <h1>about</h1> </div> ) } export default AboutAplicación.js
import About from './Container/about' import Profile from './Container/profile' import {BrowserRouter, Route} from 'react-router-dom' function App() { return ( <div className="App"> <BrowserRouter> <Route element={About} path='/about' /> <Route element={Profile } path='/profile' /> </BrowserRouter> </div> ); } export default App;Si alguien sabe alguna solución por favor responda
Revisé algunos sitios web para obtener resultados, pero no obtuve ninguna solución de ellos. Vi algunos videos de Youtube. pero codifican igual que el mío y obtuvieron resultados, pero yo no.
si usa una versión anterior, cambie de importación de react-router-dom
import About from "./Container/about"; import Profile from "./Container/profile"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; function App() { return ( <div className="App"> <Router> <Switch> <Route component={About} path="/about" /> <Route component={Profile} path="/profile" /> </Switch> </Router> </div> ); } export default App;si usa la última versión ... importe rutas desde react-router-dom App.js import Routes
import About from './Container/about' import Profile from './Container/profile' import {BrowserRouter as Router,Routes, Route} from 'react-router-dom' function App() { return ( <Router> <div className="App"> <Routes> <Route exact path='/about' element={<About />} /> <Route exact path='/profile' element={<Profile /> } /> </Routes> </div> </Router> ); } export default App;Puede usar Switch desde react-router-dom que representa la ruta exclusivamente.
Tu código sería así.
import About from "./Container/about"; import Profile from "./Container/profile"; import { BrowserRouter, Route, Switch } from "react-router-dom"; function App() { return ( <div className="App"> <BrowserRouter> <Switch> <Route component={About} path="/about" /> <Route component={Profile} path="/profile" /> </Switch> </BrowserRouter> </div> ); } export default App;Verifique este sandbox donde se implementa react-router-dom con parámetros dinámicos y componentes.