URL Paramを使用しないReact Routeビューを更新しない

Question

私は反応ビュー/wiki/:articalを持っています。別の見解をwikiに（例えば/から/wiki/some-artiacalへ）移動すると私のビューは更新されますが、あるウィキから別のウィキに移動すると（例えば/wiki/some-artiacal〜/wiki/some-other-artiacal）、ページは新しいコンテンツに再レンダリングされません。 Reactはそれらを同じビューとして見て、ページを再レンダリングしないようです。ブラウザを手動でリフレッシュすると記事が更新されますが、<Link to='/wiki/some-other-artiacal'></Link>をクリックすると反応するようになります。

import React from "react"; 
import ReactDOM from "react-dom"; 
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 


// COMPONENTS 
import Header from './components/Header'; 

// VIEWS 
import HomePage from './views/HomePage'; 
import WikiPage from './views/WikiPage'; 
import ProblemTesterPage from './views/ProblemTesterPage'; 
import NoMatchPage from './views/NoMatchPage'; 

ReactDOM.render(
    <Router> 
     <div className='container-fluid'> 
     <div className='row justify-content-center'> 
      <div className='col-xs-12 col-lg-8'> 
      <Header/> 

      <div className='card'> 
        <div className='card-body'> 
         <Switch> 
         <Route exact={true} path='/' component={HomePage}></Route> 
         <Route exact={true} path='/wiki/:artical' component={WikiPage}></Route> 
         <Route exact={true} path='/tools/problem-tester' component={ProblemTesterPage}></Route> 
         <Route component={NoMatchPage}/> 
        </Switch> 
       </div>  
       </div> 

       <p className='footer text-center text-secondary'>©2017 MathBrainius</p> 
      </div> 
     </div> 
     </div> 
    </Router> 
, document.getElementById('app')); 

ウィキコンポーネント：：

import React from 'react'; 
import ReactMarkdown from 'react-markdown'; 

export default class HomePage extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     artical: '' 
    }; 
    } 

    componentDidMount() { 
    var s = this; 
    var props = s.props; 

    axios.get(`/api/wiki/${props.match.params.artical}`, { 
     timeout: 20000, 
    }) 
    .then(res => { 
     var ping = res.data; 
     s.setState({ 
     artical: ping.artical 
     }); 
    }); 
    } 

    render() { 
    var s = this; 
    return (
     <div> 
     <ReactMarkdown source={s.state.artical}/> 
     </div> 
    ) 
    } 
} 

Answer 1

あなたのコンポーネントは、あなたがcomponentWillReceivePropsフックを使用できるように、単に新しい小道具を受け、再マウントされていません。

... 

loadData(article) { 
    var s = this 

    axios.get(`/api/wiki/${article}`, { 
    timeout: 20000, 
    }) 
    .then(res => { 
    var ping = res.data; 
    s.setState({ 
     artical: ping.artical 
    }) 
    }) 
} 

componentDidMount() { 
    this.loadData(this.props.match.params.artical) 
} 

componentWillReceiveProps(nextProps) { 
    this.loadData(nextProps.match.params.artical) 
} 

...