Estoy obteniendo un submenú dinámico de la base de datos en un menú. Mi problema es que cuando hice clic en un submenú, funciona bien y la vista también cambia. Después de eso, cualquier submenú en el que hice clic no cambia su contenido de vista que también se obtiene de la base de datos, pero la URL está cambiando.
Como si tuviera un menú llamado Servicios, y debajo de este hay un submenú dinámico obtenido mediante API.
Menú de servicio
En aplicación.js
class App extends React.Component { render() { return ( <div> <Router> <Header /> <div> <Switch> <Route path="/contact"> <Contact /> </Route> <Route path="/about"> <About /> </Route> <Route path="/service/:id"> <Service /> </Route> <Route path="/"> <Homepage /> </Route> </Switch> </div> <Footer /> </Router> </div> ); } } export default App; if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); }En la página Service.js
const Service = (props) =>{ const [service, setservice] = useState([]); const id = props.match.params.id; React.useEffect(() => { fetch("http://127.0.0.1:8000/api/service/"+ id) .then(results => results.json()) .then(res => { const service = res.data.service; setservice(service); }); }, []); return ( <div> { service.map((service, index) =>( <div key={index}> <h6 className="heading ">{service.service_name}</h6> </div> )) } </div> ); } export default withRouter(Service);"Eso es porque está ejecutando su función una vez, la necesita para que se ejecute cada vez que hay un nuevo clic. Dentro de su useEffect, intente poner id como una dependencia y vea qué sucede"...
const id = props.match.params.id React.useEffect(() => { fetch('http://127.0.0.1:8000/api/service/' + id) .then((results) => results.json()) .then((res) => { const service = res.data.service setservice(service) }) }, [id])