Creé mi aplicación con create-react-app e intenté usar react-router en ella. pero no funciona en absoluto. Estoy usando la versión react-router-dom 5.3.0. Pero si escribo la ruta de la página en la URL y luego vuelvo a cargar el sitio, los componentes se renderizarán. Por favor, ayúdame.

Aquí está mi aplicación.js

 import "./App.css"; import NavBar from "./Components/NavBar"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import LogIn from "./Components/LogIn"; import Home from "./Components/Home"; function App() { return ( <> <Router> <NavBar /> <Switch> <Route path="/" component={Home} exact/> <Route path="/login" component={LogIn}/> </Switch> </Router> </> ); } export default App;

Aquí está mi barra de navegación

 import React from 'react'; import '../App.css'; import {Link } from 'react-router-dom'; export default function NavBar() { return ( <div className='Navbar'> <h3 className='title'>Mero Blog</h3> <ul> <li> <Link to='/'>Home</Link> </li> <li> <Link to='/'>💡</Link> </li> <li className='drop'> Profile <ul className='option'> <li> <Link to='/'>See Profile</Link> </li> <li> <Link to='/'>Log Out</Link> </li> </ul> </li> <li> <Link to='/login'>Log In</Link> </li> </ul> </div> ) }

Aquí está mi index.js

 import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();