Путь маршрута = "/ subject /: selectedSubject" не меняет тему при навигации по <Link />

Question

Я пытаюсь отобразить статьи, отфильтрованные по теме. Например, при прямом доступе path="/subject/:selectedSubject" (тема / TECH) он работает отлично. Однако, если вы перейдете через <Link to={"/subject/TECH"} />, он изменит URL, но не будет загружать новые статьи.

Я пытался: соединить все с "withRouter". Я знаю, что <Link/> меняет состояние редукции, однако это не вызывает componentWillMount(), где fetchArticles().

Итак, мой вопрос, где я должен поместить fetchArticles для этогобыть вызванным, когда сработает. Я пытался положить его внутрь render(), но его продолжают вызывать без остановки. Или, может быть, я подхожу к этому неверно.

PS: если через <Link/> вызывается другой путь, например, path="/", он работает как задумано (загружает новые статьи).

в App /

<BrowserRouter>  
    <div>  
        <Route path="/" exact component={ArticlesList} />  
        <Route path="/subject/:selectedSubject" component={ArticlesList} />  
    </div>  
</BrowserRouter>

в ArticleList /

componentDidMount() {
    if (this.props.match.params.selectedSubject) {
      const selectedSubject = this.props.match.params.selectedSubject.toUpperCase();
      this.props.fetchArticles(selectedSubject);
    } else {
      this.props.fetchArticles();
    }
  }

в Link /

    {this.props.subjects.map(subject => {  
        return (  
            <Link to={`/subject/${subject.name}`} key={subject.name}>  
                <li>  
                    <span>{subject.name}</span>  
                </li>  
             </Link>  
        );  
    })}

Answer 1

Поскольку вы используете один и тот же Компонент для / и /subject/:selectedSubject, он не вызывает монтирование методов жизненного цикла, включая constructor() и componentDidMount().

. обновление метод жизненного цикла, особенно componentDidUpdate () для обработки обновления вашего компонента.