Tengo dificultades con múltiples instancias de componentes a pesar de usar diferentes valores clave para ellos. Por ejemplo, hago 2 páginas simples y paso diferentes accesorios. Sin embargo, solo uno de ellos registraría o alertaría. ¿No debería haber un mensaje de cada componente con sus accesorios? ¿Qué me perdí aquí?
class Temp_page extends Component { constructor(props) { super(props); console.log("props", props) alert("this.props.tag" + this.props.tag); } render() { return ( <div id={this.props.tag}> {this.props.tag} </div>); } }Y las rutas:
<Route key="11" path="/temp_1" element = { <Temp_page tag={"temp_1"}/> }/> <Route key="22" path="/temp_2" element = { <Temp_page tag={"temp_2"}/> }/>Esto se espera. El componente Route de react-router está diseñado para que solo represente las rutas que coinciden. Otros no rinden en absoluto.
Cuando haces element = {<Temp_page tag={"temp_1"}/>} , eso no llama inmediatamente al constructor para Temp_page. Simplemente crea un elemento; en otras palabras, un pequeño objeto que describe cómo debería verse esa parte de la página. <Route> luego verifica la URL. Si la url coincide, <Route> devolverá el elemento que le pediste que renderizara, y luego reaccionar montará el componente, llamando a su constructor. Si por el contrario la url no coincide, <Route> devuelve nulo. El elemento termina sin ser utilizado.