¿Alguien puede decirme por qué mi enrutador no funciona? No hice nada complicado con mi aplicación, es una sola página e intenté agregar un enrutador en app.js que tiene un enlace a mi página de inicio y cada vez que agrego enrutador todo desaparece de mi aplicación es solo una pantalla blanca.
app.js import "aos/dist/aos.css"; import { BrowserRouter as Router, Route, Routes} from "react-router-dom"; import Home from "./components/Home"; function App() { return ( <div className="App"> <h1>Welcome to React Router!</h1> <Routes> <Route path="/" element={<Home />} /> </Routes> </div> ); } export default App;
Home.js import React from 'react' function Home() { return ( <div>Home</div> ) } export default Home
index.js import * as React from "react"; import * as ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );
Intente usar Cambiar en lugar de Rutas y tampoco tiene que usar corchetes triangulares en el elemento
import Home from './components/Home'; import { Route, Switch } from 'react-router'; <Switch> <Route path="/" element={Home} /> </Switch>
Si desea que todas las rutas comiencen con / vaya a su página de inicio, puede cambiar así: <Route path="/*" element={} />