Réagissez l'itinéraire avec le paramètre d'URL ne mettant pas à jour la vue

Question

J'ai une vue de réaction /wiki/:artical. Quand je passe d'une vue différente au wiki (par exemple de / à /wiki/some-artiacal) ma vue se met à jour, mais quand je passe d'un wiki à un autre (par exemple /wiki/some-artiacal à /wiki/some-other-artiacal) la page ne se reconnait pas avec le nouveau contenu. Il semble que React les voit comme la même vue et ne rediffuse pas la page. Si je rafraîchis le navigateur manuellement, l'article est mis à jour, mais je veux réagir pour actualiser lorsque je clique sur <Link to='/wiki/some-other-artiacal'></Link>.

React Fichier Router:

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')); 

Composante Wiki:

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

Votre composant n'est pas Remontage, juste recevoir de nouveaux accessoires pour que vous puissiez utiliser le crochet 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) 
} 

...