Estaba siguiendo un tutorial y mi localhost está completamente en blanco después de importar {Link} desde react-router-dom. Seguí palabra por palabra, pero mi host local está en blanco tan pronto como agregué el enlace en navbar.js.
import React from 'react'; import {Link} from 'react-router-dom'; function Navbar() { return( <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <Link to="/" class="navbar-brand">SkyCloud</Link> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-togglser-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <Link to="/" class="nav-link active">Home</Link> </li> <li class="nav-item"> <Link to="/about" class="nav-link active">About</Link> </li> <li class="nav-item"> <Link to="/contact" class="nav-link active">Contact</Link> </li> </ul> </div> </div> </nav> ); } export default Navbar;Y este es mi archivo App.js...
import React from 'react'; import Navbar from './components/inc/Navbar'; import Home from './components/pages/Home'; import About from './components/pages/About'; import Contact from './components/pages/Contact'; import {BrowserRouter as Router} from 'react-router-dom'; function App() { return ( <Router> <div> <Navbar/> <Home/> <About/> <Contact/> </div> </Router> ); } export default App;Debe envolver sus componentes dentro de Route HOC, si está utilizando el enrutador de reacción v5
<Route path="/"> <Home/> </Route> <Route path="/about"> <About/> </Route> <Route path="/Contact"> <Contact/> </Route>si su enrutador reacciona v6, la respuesta es
<Route index path="/" element={<Home />} /> <Route path="/contacts" element={<Contact/>} /> <Route path=/about" element={<About/>} />Debe importar rutas y rutas también desde "react-router-dom";
entonces tu código se convertirá
import React from 'react'; import Navbar from './components/inc/Navbar'; import Home from './components/pages/Home'; import About from './components/pages/About'; import Contact from './components/pages/Contact'; import {Routes,Route ,BrowserRouter as Router} from 'react-router-dom'; function App() { return ( <Router> <div> <Navbar/> <Routes> <Route exact path="/" element={<Home/>}> <Route path="/about" element={ <About/>}> <Route path="/contact" element={ <Contact/>} /> </Routes> </div> </Router> );Si no sabes qué versión usas. compruebe package.json y busque react-router-dom . Entonces verás la versión. (React router dom v6) Si usa un enlace, debe usar el enrutador y las rutas. Creo que no se muestra ningún error en su proyecto. esta es la documentacion
https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app
Este es el código de demostración de rutas, ruta
import * as React from "react"; import { Routes, Route, Link } from "react-router-dom"; function App() { return ( <div className="App"> <h1>Welcome to React Router!</h1> <Routes> <Route path="/" element={<Home />} /> <Route path="about" element={<About />} /> </Routes> </div> ); }Si usa V5
import { BrowserRouter, Switch, Route, Link, useRouteMatch } from "react-router-dom"; function App() { return ( <BrowserRouter> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/users"> <Users /> </Route> </Switch> </BrowserRouter> ); }reaccionar router dom v5 documentación https://reactrouter.com/docs/en/v6/upgrading/v5