Comencé un proyecto de reacción básico con npx create-react-app web y lo ejecuté con npm start . Estoy usando react-router-dom para manejar la navegación y el proyecto es el siguiente:
index.js ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ) App.js: function Home() { return ( <div> <h2>Home</h2> <div> I am at home, this should render as expected </div> </div> ); } function About() { return ( <div> <h2>About</h2> </div> ); } function Dashboard() { return ( <div> <h2>Dashboard</h2> </div> ); } class App extends Component { render(){ return( <main> <Routes> <Route path='/' element={Home} /> <Route path='/About' element={About} /> </Routes> </main> ) } } export default App; Cuando voy a localhost:3000 , no veo nada más que una página en blanco, ¿qué me estoy perdiendo aquí?
corrija su sintaxis usando:
class App extends Component { render(){ return( <Router> <Routes> <Route path='/' element={<Home/>} /> <Route path='/About' element={<About/>} /> </Routes> </Router> ) } } export default App;También importe un enrutador como este si no lo ha hecho,
import { BrowserRouter as Router, Routes, Route, } from "react-router-dom";Espero que resuelva su problema.
Es un problema básico de sintaxis, no puedo eliminar la pregunta porque ya se votó a favor. Veo que hay cierta confusión general, así que a la antigua usanza:
<Route exact path="/" render={() => (<Foo/>)}/>o
<Route path="/" element={Foo}/>ya no funciona A continuación se muestra el ejemplo de trabajo completo:
Aquí está con la sintaxis adecuada:
function Home() { return ( <div> <h2>Home</h2> <div> I am at home, this should render as expected </div> </div> ); } function About() { return ( <div> <h2>About</h2> </div> ); } function Dashboard() { return ( <div> <h2>Dashboard</h2> </div> ); } class App extends Component { render(){ return( <BrowserRouter> <Routes> <Route exact path='/' element={<Home/>}/> <Route exact path='/about' element={<About/>}/> <Route exact path='/dashboard' element={<Dashboard/>}/> </Routes> </BrowserRouter> ) } }