Estoy haciendo un proyecto personal de React.js. Estoy tratando de usar react-router-dom, pero no he podido hacerlo funcionar. Hice el BrowserRouter en App.js. Hasta allí, la aplicación funciona bien, pero no puedo hacer que el enrutamiento se redirija dinámicamente a un elemento del mapa. Traté de seguir la documentación y algunos tutoriales sin éxito. Los datos provienen de la API de Star Wars Este es el código: App.js:
import './App.css'; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import Home from './components/Home'; import MovieDetail from './components/MovieDetail' import Navbar from './components/Navbar'; function App() { return ( <Router> <> <Navbar /> <Routes> <Route exact path='/' element={<Home />} /> </Routes> <Routes> <Route exact path to='/:movieId' element={<MovieDetail />} /> </Routes> </> </Router> ); } export default App;Detalle del artículo:
import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; const MovieDetail = () => { const { movieId } = useParams(); const [result, setResult] = useState([]); const fetchData = async () => { const res = await fetch("https://www.swapi.tech/api/films/"); const json = await res.json(); setResult(json.result); } useEffect(() => { fetchData(); }, []); let movieMatch = (result.find(value) => value.properties.title == movieId) return ( <div> <h2> {result .find((value) => {value.properties.title == movieId})} </h2> </div> ); } export default MovieDetail;ACTUALIZAR Este es un enlace a todo el código en codesand con App.js actualizado
De su código, asumo que está usando React Router v6 en su proyecto. Pruebe el siguiente código:
import './App.css'; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from './components/Home'; import MovieDetail from './components/MovieDetail' import Navbar from './components/Navbar'; function App() { return ( <BrowserRouter> <Routes> <Navbar /> <Route path='/' element={<Home />} /> <Route path=':movieId' element={<MovieDetail />} /> </Routes> </BrowserRouter> ); } export default App;Consulte la documentación del enrutador React para obtener más detalles.
si está utilizando index.js como contenedor para app.js <BrowserRouter /> or <Router /> en su caso no se usa en app.js, se usa en index.js; de lo contrario, no funcionará
index.js debería verse así: -
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; function App() { return <h1>Hello React Router</h1>; } ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") ); **Por ejemplo, supongamos que tiene una ruta "/películas" y desea que cada vez que su aplicación (ruta = "/") se inicie o se cargue para ser redirigido a "/películas" ** luego envuelva la lógica de enrutamiento con *<Switch />* , use la propiedad Redirect del router dom para redirigir de "/" a "/movies" y use componente en lugar de elemento para representar el componente correspondiente además de no envolver con <Routes> </Routes> cada vez que están haciendo la ruta como la usamos en index.js
entonces app.js será: -
import './App.css'; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import Home from './components/Home'; import MovieDetail from './components/MovieDetail' import Navbar from './components/Navbar'; function App() { return ( <> <Navbar /> <Switch> <Route exact path='/movies' component={<Home />} /> <Route exact path to='movies/:movieId' component={<MovieDetail />} // to redirect from "/" to "/movies" <Redirect from="/" to="/students"></Redirect> ); }