コンポーネントが小道具を受け取りません

Question

私のの家にコンポーネントがあります。ユーザーの名前を読み取った後、有効であるかどうかを確認します（名前が正しい場合、Axiosはユーザーを返します）。それが有効で、ボタンをクリックすると、ダッシュボードコンポーネントが表示されます。問題は、名前が有効であってもダッシュボードはをのホームから受け取っていません。私はcomponentDidUpdateで何かを試しましたが、うまく動作しませんでした。私が理解していないのは、ダッシュボードがレンダリングされても正しいユーザーを入力したにもかかわらず、その小道具を取得しないのはなぜですか？

これはコンストラクタのない私のホームコンポーネントです：

inputChange(event) { 
    this.setState({username:event.target.value}); 
} 

login() { 
    this.setState({clicked: true}) 
    UsersService.validUser(this.state.username).then((user) => { 
     this.setState({valid: true, user: user}) 
    }); 
} 

change() { 
    this.setState({clicked: false}) 
} 

render() { 
    if(this.state.clicked) { 
     if (this.state.valid) 
      return (
       <Redirect to={{ pathname: '/dashboard', state: { user: this.state.user } }}/> 
      ) 
     else 
      this.change; 
    } 
    return (
     <div> 
      <input onChange={this.inputChange.bind(this)}/> 
      <button onClick={this.login}>LOGIN</button> 
     </div> 
} 

ダッシュボードコンポーネント

export interface DashboardProps { 
    user: IUser 
} 

interface DashboardState { 
} 

class Dashboard extends React.Component<DashboardProps, DashboardState> { 
    public static defaultProps: DashboardProps = { 
     user: { 
      userId: '', 
      name: '', 
      phone: '', 
      email: '', 
      age: '', 
      tag: [] 
     } 
    } 
    constructor(props: DashboardProps) { 
     super(props); 

     this.state = { 
     }; 
    } 

    render() { 
     return (
      <div> 
       <Header user={this.props.user}/> 
       <div> 
        <span>Hi, {this.props.user.name}</span> <br/> 
       </div> 
      </div> 
     ); 
    } 
} 

export default withRouter(Dashboard); 

Answer 1

は、ダッシュボードコンポーネントにreact-routerのwithRouter HOCを使用してみてくださいは、現在のルーティングの小道具は、コンポーネントに注入します。

export default withRouter(Dashboard); 

編集：

あなたの状態情報がthis.props.location.state.userで利用できるようになります。