0
201
Vistas¿Ocultar componentes en reacción con cambio de URL dinámicas?
Estoy trabajando para ocultar los componentes donde una página se representa a partir de varios componentes. A continuación se muestra el ejemplo de la página renderizada con varios componentes.
¿Cómo se pueden ocultar los componentes cuando cambia la URL y cuál podría ser la mejor manera de ocultar los componentes para las URL dinámicas?
import React, { Component } from 'react'; import all the compoent A, B AND C class App extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div> <Component A/> <Component B/> <Component C/> </div> ); } } export default App;Llegué al punto en que puedo ocultar los componentes usando
1 . método usando una declaración if else
if(condition) { render{} else{ render{} }#2 use el operador tenario de acuerdo con la condición que quiero
La solución común que se hizo es window.location.href ---> y verifique la cadena con la cadena de URL que quiero y use la condición if else.
¿Alguien podría guiar una mejor manera de ocultar los componentes mientras se renderiza con el cambio de URL y hacerlo más configurable?
2 Respuestas
Responde la pregunta0
Lo mejor es usar React-Router https://reactrouter.com/ . Tienen un tutorial fácil de seguir en su sitio web que le dirá cómo mostrar dinámicamente diferentes componentes según la URL.
0
En lugar de if else basado en la condición
Puede representar componentes en función de los destinos de URL específicos
Por ejemplo:
<Route path="/" element={<App />}> <Route path="sales" element={<Sales />}> <Route path="invoices" element={<Invoices />}> <Route path=":invoice" element={<Invoice />} /> </Route> </Route> </Route> Para el siguiente sitio web. Centrarse en la URL del sitio web 
Para un inicio rápido, siga: https://reactrouter.com/docs/en/v6/getting-started/overview