Tengo un componente de inicio de sesión que tiene un correo electrónico y una contraseña para iniciar sesión. Después de un éxito, uso this.props.history.push (‘/ userComponent) para enrutar otro componente. En el componente donde se enruta debe mostrar el nombre de la persona / usuario. Estoy tratando de enviar como accesorio, pero termino siendo indefinido ya que el componente del usuario (el componente al que se enruta) no se representa. Por favor revise lo siguiente.

export default class Login extends Component { constructor(props) { super(props); this.x = ''; } onSubmit = () ={amp}gt; { fetch('http://localhost:5000/api/account/') .then(res ={amp}gt; res.json()) .then(data ={amp}gt; { for (let index = 0; index {amp}lt; data.length; index  ) { if (userName === data[index].email {amp}amp;{amp}amp; passWord === data[index].password {amp}amp;{amp}amp; data[index].role === "Admin") { console.log("login is successful"); this.x = true; console.log('.......state after update: '   this.x); this.props.history.push('/userA'); return ( {amp}lt;div{amp}gt; {amp}lt;UserA somePropName={data[index].userName} /{amp}gt; {amp}lt;/div{amp}gt; ); } else if (userName === data[index].email {amp}amp;{amp}amp; passWord === data[index].password) { console.log("login is successful"); this.x = false; console.log("x....... "   this.x); this.props.history.push('/userB'); return ( {amp}lt;UserB somePropName={data[index].userName} /{amp}gt; ); } else { this.props.history.push('/errorPage'); } } }); } render() { return ( {amp}lt;div{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;label for="uname"{amp}gt;{amp}lt;b{amp}gt;Username{amp}lt;/b{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;input type="text" placeholder="Enter Username" name="uname" required /{amp}gt; {amp}lt;label for="psw"{amp}gt;{amp}lt;b{amp}gt;Password{amp}lt;/b{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;input type="password" placeholder="Enter Password" name="psw" required /{amp}gt; {amp}lt;button type="submit" onClick={this.onSubmit}{amp}gt;Login {amp}lt;/button{amp}gt; {amp}lt;label{amp}gt; {amp}lt;input type="checkbox" checked="checked" name="remember" /{amp}gt; Remember me {amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="container" style="background-color:#f1f1f1"{amp}gt; {amp}lt;button type="button" class="cancelbtn"{amp}gt;Cancel{amp}lt;/button{amp}gt; {amp}lt;span class="psw"{amp}gt;Forgot {amp}lt;a href="#"{amp}gt;password?{amp}lt;/a{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } 

}

Debe renderizar condicionalmente UserA o UserB en render (). Coloque los campos relacionados con el usuario en el estado. Algo como

 render() { return ( {amp}lt;div{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;label for="uname"{amp}gt;{amp}lt;b{amp}gt;Username{amp}lt;/b{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;input type="text" placeholder="Enter Username" name="uname" required /{amp}gt; {amp}lt;label for="psw"{amp}gt;{amp}lt;b{amp}gt;Password{amp}lt;/b{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;input type="password" placeholder="Enter Password" name="psw" required /{amp}gt; {amp}lt;button type="submit" onClick={this.onSubmit}{amp}gt;Login {amp}lt;/button{amp}gt; {amp}lt;label{amp}gt; {amp}lt;input type="checkbox" checked="checked" name="remember" /{amp}gt; Remember me {amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="container" style="background-color:#f1f1f1"{amp}gt; {amp}lt;button type="button" class="cancelbtn"{amp}gt;Cancel{amp}lt;/button{amp}gt; {amp}lt;span class="psw"{amp}gt;Forgot {amp}lt;a href="#"{amp}gt;password?{amp}lt;/a{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {this.state.isLoggedIn {amp}amp;{amp}amp; this.state.isAdmin {amp}amp;{amp}amp; {amp}lt;UserA somePropName={this.state.userName} /{amp}gt;} {this.state.isLoggedIn {amp}amp;{amp}amp; !this.state.isAdmin {amp}amp;{amp}amp; {amp}lt;UserB somePropName={this.state.userName} /{amp}gt;} {amp}lt;/div{amp}gt;); } 

Para la función onSubmit

 onSubmit = () ={amp}gt; { fetch('http://localhost:5000/api/account/') .then(res ={amp}gt; res.json()) .then(data ={amp}gt; { this.props.history.push('/xxx'); this.setState({ isAdmin: data[index].role === "Admin" isLoggedIn: userName === data[index].email {amp}amp;{amp}amp; passWord === data[index].password, userName: data[index].userName }) }) } 

La forma en que puede pasar propiedades a otro componente mientras navega

 this.props.history.push({ pathname: '/userB', state: { title: 'Hello world' } }) 

usando el enlace

 {amp}lt;Link to={{ pathname: '/userB', state: { title: 'Hello...' } }}{amp}gt;Click{amp}lt;/Link{amp}gt; 

Acceso como este en el componente navegado

 this.props.location.state.title