React-router-dom - 変更URLをリンクしますが、レンダリングしません

Question

私は反応するのが新しく、を作成して、dyのデータの次または前の項目に移動しました（たとえば、user/2ビュー、前のリンクはuser/1に行き、次のリンクはuser/3に行きます）、URLは正しく変更されますが、コンポーネントは全くレンダリングされず、データはまったく再ロードされません。

私は、子コンポーネントが状態を変更していないことを検出していないため、親コンポーネントがレンダリングしないためです。

私はwithRouterを使用しようとしましたが、私はエラーが持っている：誰かがそれを解決し、いくつかの説明を持っている場合、私は感謝されるYou should not use <Route> or withRouter() outside a <Router>をし、私はそうやって理解していないよ:)

App.js：

import React, { Component } from 'react'; 
import { 
    Route, 
    Switch, 
    withRouter, 
} from 'react-router-dom'; 


import HomePage from './pages/home'; 
import SinglePage from './pages/single'; 

class App extends Component { 



    render() { 


    return (
     <Switch> 
     <div> 
      <Route exact path="/" component={HomePage} /> 
      <Route path="/:id" component={SinglePage} /> 
     </div> 
     </Switch> 
    ); 
    } 
} 

export default withRouter(App); 

Single.js：

import React, { Component } from 'react'; 
import Details from '../components/details' 
import Header from '../components/header' 
import { ProgressBar } from 'react-materialize'; 

class SinglePage extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     data: { data: null }, 
    } 
    } 

    componentDidMount() { 
     fetch(`http://localhost:1337/${this.props.match.params.id}`) 
     .then((res) => res.json()) 
     .then((json) => { 
     this.setState({ 
      data: json, 
     }); 
     }); 
    } 

    render() { 

    const { data } = this.state; 

    return (

     <div> 

     <h2> SinglePage </h2> 

     {!data ? (
      <ProgressBar /> 
     ) : (
      <div> 
      <Header id={this.props.match.params.id} /> 
      <Details item={data} /> 
      </div> 
     )} 
     </div> 
    ); 
    } 

} 

export default SinglePage; 

Header.js：

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { Link, withRouter } from 'react-router-dom'; 

class Header extends Component { 

    static propTypes = { 
    item: PropTypes.shape({ 
     data: PropTypes.string.isRequired, 
    }).isRequired, 
    } 

    render() { 
     const prev = parseInt(this.props.id) - 1 
     const next = parseInt(this.props.id) + 1 

     return (
      <div> 
       <Link to="/"> Retour </Link> 
       <Link to={`/${prev}`}> Précédent </Link> 
       <Link to={`/${next}`}> Suivant </Link> 
      </div> 
     ) 
    } 
} 

export default Header; 

Answer 1

解決策はかなりシンプルです。あなたがする必要があるのは、componentWillReceivePropsを使用して、データを再度取得した場合、パラメータが更新されたかどうかを確認することです。

componentDidMount() { 
    this.getData(this.props.match.params.id); 
} 

componentWillReceiveProps(nextProps) { 
    if(this.props.match.params.id !== nextProps.match.params.id) { 
     this.getData(nextProps.match.params.id); 
    } 
} 

getData = (param) => { 
    fetch(`http://localhost:1337/${params}`) 
     .then((res) => res.json()) 
     .then((json) => { 
     this.setState({ 
      data: json, 
     }); 
     }); 
}