He estado recibiendo páginas en blanco en blanco cuando intento crear varias páginas dentro de mi aplicación y he estado usando el router-dom para tratar de solucionar esto, pero aún no puedo entender por qué. Aquí está mi código con Home y Navigation js dentro de una carpeta de componentes en el directorio src y App.js justo dentro del directorio src.
Aplicación.js
import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import Glazing from './components/Glazing'; import Navigation from './components/Navigation'; class App extends Component { render() { return ( <BrowserRouter> <div> <Navigation /> <Route path="/" component={Home} exact/> <Route path="/glazing" component={Glazing}/> </div> </BrowserRouter> ); } } export default App;Nav.js
import React from 'react'; import { NavLink } from 'react-router-dom'; const Navigation = () => { return ( <div> <NavLink to="/">Home</NavLink> <NavLink to="/glazing">Glazing</NavLink> </div> ); } export default Navigation;Inicio.js
import React from "react"; import logo from '../logo.svg'; import './Home.css'; import "@fontsource/dm-sans"; function home() { return ( <div className="Home"> <header className="Home-header"> <h1>EPC RATING PREDICTOR</h1> </header> <button> GET STARTED</button> </div> ); } export default Home;Si está utilizando react-router-dom@6 , hay un par de cosas que debe abordar.
Switch fue reemplazado por el componente Routes y todos los componentes Route deben ser envueltos/representados directamente por Routes u otro componente Route en el caso de rutas anidadas.Route cambió; Se acabaron los accesorios de función de component , render e children , todos reemplazados por un accesorio de un solo element que toma un ReactNode , también conocido como JSX.Ejemplo:
import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './components/Home'; import Glazing from './components/Glazing'; import Navigation from './components/Navigation'; class App extends Component { render() { return ( <BrowserRouter> <div> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route path="/glazing" element={<Glazing />} /> </Routes> </div> </BrowserRouter> ); } }Consulte la guía Actualización desde v5 para ver otros cambios.