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();Creo que el problema con React18. Si cambia index.js a
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );entonces funcionará, pero ReactDOM.render ya no es compatible con React 18. Si ha resuelto este problema, hágamelo saber. Una cosa más => React 18: react-router@v5 se está rompiendo en el modo estricto, por lo que sin el modo estricto funciona para mí
root.render( <BrowserRouter> <React.StrictMode> <App/> </React.StrictMode> </BrowserRouter> );