リロードは、私は私のようなURLに移動してきたシナリオをした

Question

リンクをクリックすると上のコンポーネントを反応させる：

はlocalhost：3000 /学生およびローカルホスト：3000 /学生/ ID

両方とも、StudentLookupという同じコンポーネントをレンダリングします。

<Link to="/students" /> 

<Switch> 
    <Route exact path="/" component={HomePage} /> 
    <Route path="/students/:id?" component={StudentLookup} /> 
    <Route component={NotFound} /> 
</Switch> 

が今私のStudentLookupで私が：

私は、ローカルホスト上でクリック

class StudentLookup extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { studentId: ''} 
    this.handleSubmitButton = this.handleSubmitButton.bind(this) 
    this.onInputChange = this.onInputChange.bind(this) 
    } 

handleSearch (e) { 
    const { studentId } = this.state 
    e.preventDefault() 
    this.props.history.push(`/students/${studentId}`) 
    this.props.fetchDetailsForStudent(studentId) 
    } 

    onInputChange (e) { 
    this.setState({ studentId: e.target.value }) 
    } 

    componentDidMount(){ 
    const studentId = this.props.match.params.id 
    if(id) { 
     this.setState({studentId}) 
     this.props.fetchDetailsForStudent(studentId) 
    } 
    else if(studentId === "") { 
     this.props.history.push('/'); 
     this.setState({studentId: ''}) 
    } 
    else 
     this.setState({ studentId: '' }) 
    } 

    componentWillReceiveProps(nextProps){ 
    console.log(nextProps.params) // this is always undefined 
    console.log(this.props.params) // this is always undefined 
    } 

    render() { 
    const studentId = this.props.studentDetails.student_id 
    return (
     <div className="search-container"> 
     <form noValidate="noValidate" onSubmit={this.handleSearch}> 
      <input type="text" value={this.state.studentId} onChange={this.onInputChange} placeholder="Enter Student Id" /> 
      <button type="Submit">Search</button> 
      {studentHeader} // we populate this based on id 
     </form> 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    studentDetails: state.studentInfo, 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => ({ 
    fetchDetailsForStudent (studentId) { 
    dispatch(fetchDetailsForStudent(studentId)) 
    } 
}) 

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(StudentLookup)) 

：

ここでは私のリンクとルートです予想通り3000 /学生には、空の検索ボックスを表示します - 私はIDを入力すると（検索ボックスまたはURLは123と言う）、Enterキーを押すとstudentInfoが期待どおりにポピュレートされます（urlや検索ボックスのIDの変更も可能です）。しかし、localhost：3000 /学生は、それでもlocalhost：3000/students/123からのデータを表示します。 localhost：3000/studentsリンクをクリックすると、localhost：3000/studentsを再度読み込む方法を探しています（検索ボックスとstudentHeaderを除く）。 何か助けていただければ幸いです。ありがとう

Answer 1

特定のパラメータがパスにあるかどうかを確認するには、componentWillUpdateまたはcomponentWillRecievePropsまたはcomponentDidUpdateを使用します。存在しない場合は、状態のstudentIdを空として設定します。

コードは次のようになります。

componentWillReceiveProps(nextProps) 
    { 
    if(!nextProps.match.params.id) 
     this.setState({studentId : ''}) 
    }