Estos son los contenidos del directorio del proyecto denominado my-app .
node_modules package-lock.json package.json public └── index.html src ├── App.js ├── index.js └── pages └── Home.js public/index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <!-- all the components are displayed in this #root element --> <div id="root"></div> </body> </html> src/App.js
import {BrowserRouter, Route, Link, Switch} from 'react-router-dom'; import ReactDOM from 'react-dom'; import Home from './pages/Home'; function App() { return <> <BrowserRouter> <Route exact path="/" component={Home}></Route> </BrowserRouter> </>; } export default App; src/index.js
import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById("root") ); src/pages/Home.js
function Home() { return <h1>Homepage</h1> } export default Home; Cuando ejecuto npm start en el directorio my-app , el proyecto se compila con el siguiente mensaje:
Compiled successfully! You can now view my-app in the browser. Local: http://localhost:3000 On Your Network: http://<network_ip>:3000 Note that the development build is not optimized. To create a production build, use npm run build. asset static/js/bundle.js 1.49 MiB [emitted] (name: main) 1 related asset asset index.html 334 bytes [emitted] asset asset-manifest.json 190 bytes [emitted] cached modules 1.39 MiB (javascript) 28.1 KiB (runtime) [cached] 109 modules webpack 5.66.0 compiled successfully in 1509 ms Sin embargo, cuando abro http://localhost:3000 en un navegador web, aparece una página en blanco, lo que significa que no se muestra JSX/HTML en el div #root en public/index.html . Esto solo sucede cuando introduzco las líneas con las etiquetas BrowserRouter y Router . ¿Alguien más puede reproducir este error? ¡No puedo entender qué tiene de malo esto!
Editar: Aquí están las versiones de nodo, npx y npm que estoy usando.
:~$ node -v v16.13.2 :~$ npm -v 8.1.2 :~$ npx -v 8.1.2Desde react-router-dom v6, algunos accesorios cambiaron para los componentes que expone, como Route , y Switch se reemplaza por Routes :
Aquí está su código modificado para que coincida con los nuevos cambios:
function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />}></Route> </Routes> </BrowserRouter> ); } export default App; Además, no es necesario <> (también conocido como React.Fragment ya que BrowserRouter es el único elemento presente en jsx.