Estoy tratando de configurar el enrutamiento pero, por alguna razón, devuelve una página en blanco y no muestra nada.
Estoy usando la versión de enrutador 6.3.0
// index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from "react-router-dom"; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <BrowserRouter><App /></BrowserRouter> </React.StrictMode>, document.getElementById('root') ); // --------------------------------------------- // // App.js import React, { Component, Fragment } from "react"; import { Route } from "react-router-dom"; import Header from "./components/Landing/Header" import Landing from "./components/Landing/Landing"; import Footer from "./components/Landing/Footer"; class App extends Component { render() { return ( <Fragment> <Header /> <Route path="/landing"> <Landing /> </Route> <Footer /> </Fragment> ); } } export default App; // --------------------------------------------- // // Landing.js import Body from './Body' function Landing(props) { return ( <Body> <div className="Landing"> Landing Context </div> </Body> ) } export default Landing; Entonces, cuando visito http://localhost:3000/landing , no aparece nada, y cuando intento http://localhost:3000 , tampoco aparece nada.
Si elimino la parte <Route></Route> en App.js, se procesa, pero en cualquier URL. ¿Qué echo de menos?
react-router v6 tiene algunos cambios importantes, reemplazó Switch con el componente Routes:
/ index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from "react-router-dom"; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <BrowserRouter><App /></BrowserRouter> </React.StrictMode>, document.getElementById('root') ); // --------------------------------------------- // // App.js import React, { Component, Fragment } from "react"; import { Routes, Route } from "react-router-dom"; import Header from "./components/Landing/Header" import Landing from "./components/Landing/Landing"; import Footer from "./components/Landing/Footer"; class App extends Component { render() { return ( <Fragment> <Header /> <Routes> <Route path="/landing" element={<Landing />}/> </Routes> <Footer /> </Fragment> ); } } export default App;Como el OP está usando react-router-dom v6
En lugar de elementos secundarios, espera que los accesorios del elemento representen el componente.
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes
En app.js envuelve tu ruta en un enrutador como este
import React, { Component, Fragment } from "react"; import { Router, Route } from "react-router-dom"; import Header from "./components/Landing/Header" import Landing from "./components/Landing/Landing"; import Footer from "./components/Landing/Footer"; class App extends Component { render() { return ( <Fragment> <Header /> <Router> <Route path="/landing"> <Landing /> </Route> </Router> <Footer /> </Fragment> ); } } export default App;