Aquí está mi App.js de mi proyecto actual, me enfrento a un problema, cada vez que renderizo todos mis componentes individualmente que se mencionan en la parte comentada, me da un resultado completo, pero tan pronto como lo renderizo a través del enrutador de reacción- dom la página se vuelve en blanco. Por favor, ayúdame con esto.
import Topbar from "./components/topbar/Topbar"; import Homepage from "./pages/homepage/Homepage"; import Login from "./pages/login/Login"; import Register from "./pages/register/Register"; import Settings from "./pages/settings/Settings"; import Single from "./pages/single/Single"; import Write from "./pages/write/Write"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Header from "./components/header/Header"; import Posts from "./components/posts/Posts"; function App() { const currentUser = true; return ( // <> // <Topbar/> // <Header/> // <Single/> // <Homepage/> // <Posts/> // <Register/> // <Login/> // <Settings/> // </> <BrowserRouter> <Topbar /> <Routes> <Route exact path="/"> <Homepage /> </Route> <Route path="/posts"> <Homepage /> </Route> <Route path="/register"> {currentUser ? <Homepage /> : <Register />} </Route> <Route path="/login">{currentUser ? <Homepage /> : <Login />}</Route> <Route path="/post/:id"> <Single /> </Route> <Route path="/write">{currentUser ? <Write /> : <Login />}</Route> <Route path="/settings"> {currentUser ? <Settings /> : <Login />} </Route> </Routes> </BrowserRouter> ); } export default App;Intenta cambiar tus rutas para que se vean así:
<Route exact path="/" element={<Homepage />} />
El componente que desea representar debe estar en el element prop.
https://reactrouter.com/docs/en/v6/getting-started/overview https://reactrouter.com/docs/en/v6/upgrading/v5
<Route exact path="/" element={<Homepage />} /> La única vez que puede colocar algo dentro de una Route como elemento secundario es para el enrutamiento anidado. Por ejemplo:
<Route path="/teams" element={<Teams />}> <Route path=":teams" element={<Team />} /> </Route>he pasado por esto Creo que deberías instalar React Router primero (parece que ya está instalado)
npm install react-router-dom@6Sugiero usarlo de la siguiente manera:
function App() { return ( <Router> <div className='container'> <div className='Header'> <h2>Blog Site</h2> </div> <div className='links'> // Mention your links here <ul> <li> <Link to="/tag">Tags</Link> </li> <li> <Link to="/startup">Startups</Link> </li> </ul> </div> <Routes> // Describe your routes here <Route exact path="/tag" element={<Tag />} /> <Route exact path="/startup" element={<Startup />} /> </Routes> </div> </Router> ); }Elegí una pequeña pieza de código de mi proyecto, puede intentar usar mi enfoque.