異なるルートで使用されている同じコンポーネントを再レンダリングする方法はありますか？

Question

私は同じコンポーネントをレンダリングするいくつかのルートを持っています。ルートに応じて、コンポーネントが異なるデータをフェッチするようにします。しかし、同じコンポーネントをレンダリングしているので、同じコンポーネントをレンダリングする別のルートにリンクタグ（レイアウトコンポーネントにあるナビゲーションバーから）をクリックすると、ReactはDOMへの変更を認識しません。コンポーネントが新しいデータで再レンダリングされないことを意味します。ここに私のルートは以下のとおりです。ここで

class App extends Component { 
    render() { 
    return (
     <BrowserRouter> 
     <Provider store={store}> 
      <Layout> 
      <Switch> 
       <Route exact path="/" component={Home} /> 
       <Route exact path="/fashion" component={PostTypePageContainer} /> 
       <Route exact path="/beauty" component={PostTypePageContainer} /> 
      </Switch> 
      </Layout> 
     </Provider> 
     </BrowserRouter> 
    ); 
    } 
} 
export default App; 

は私が新しいデータで毎回再レンダリングしたいPostTypePageContainerコンポーネントです：

class PostTypePageContainer extends Component { 
    componentDidMount() { 
    let route; 
    switch (this.props.location.pathname) { 
     case '/fashion': 
     route = '/fashion'; 
     break; 
     case '/beauty': 
     route = '/beauty'; 
     break; 
     default: 
     console.log('No data was found'); 
    } 

    let dataURL = `http://localhost:8888/my-site//wp-json/wp/v2${route}?_embed`; 
    fetch(dataURL) 
     .then(res => res.json()) 
     .then(res => { 
     this.props.dispatch(getData(res)); 
     }); 
    } 

    render() { 
    let posts = this.props.postData.map((post, i) => { 
     return <PostTypePage key={i} props={post} />; 
    }); 
    return <div>{posts}</div>; 
    } 
} 

const mapStateToProps = ({ data }) => ({ 
    postData: data.postData 
}); 

export default connect(mapStateToProps)(PostTypePageContainer); 

はどのように行くのですが、そのコンポーネントを毎回再レンダリング？

Answer 1

これは反応ルータの意図された動作です。

私はあなたが別の場所からデータを取得し、小道具を経由してPostTypePageContainerに渡し、キーを使用して、あなたにその周りに迅速に仕事を与えるためにHOCを作成示唆していますが、あなたのコンポーネントが再マウントします。

class App extends Component { 
    render() { 
    return (
     <BrowserRouter> 
     <Provider store={store}> 
      <Layout> 
      <Switch> 
       <Route exact path="/" component={Home} /> 
       <Route exact key={uniqueKey} path="/fashion" component={PostTypePageContainer} /> 
       <Route exact key={someOtherUniqueKey} path="/beauty" component={PostTypePageContainer} /> 
      </Switch> 
      </Layout> 
     </Provider> 
     </BrowserRouter> 
    ); 
    } 
} 
export default App; 

出典：https://github.com/ReactTraining/react-router/issues/1703