Реагировать маршрутизатор В4 маршруты с параметрами не рендеринг/освежающий

У меня есть маршрут для динамических параметров. Например, если url-адрес my-app.com/about, он будет получать данные JSON из REST API для страницы about. Я использую один компонент с именем Page для всех параметров URL.

Когда я нажимаю на навигационные ссылки, url-адрес изменяется, но новое содержимое не отображается, пока я не обновлю страницу.

Мой код: 

class App extends Component {
  render() {
    return (

        <BrowserRouter>
            <div>

                <NavLink to='/home'>Home</NavLink>
                <NavLink to='/about'>About</NavLink>
                <NavLink to='/contact'>Contact</NavLink>                 

                <Switch>                                                                  
                  <Route path="/:slug" component={ Page } />                                    
                </Switch>

            </div>
          </BrowserRouter>

    );
  }
}

Мой компонент страницы. Я выбираю JSON для отображения содержимого страницы: 

import React, { Component } from 'react';
import axios from 'axios';

class Page extends Component {

    constructor() {
      super();
      this.state = {
        page: []
      };
    }

  componentDidMount() { 
    axios.get('http://example.com/wp-json/wp/v2/pages?slug=' + this.props.match.params.slug)
    .then(response => {
      this.setState({ page: response.data });
    })
    .catch(error => {
        console.log(error);
    });
  }

  render() {
    return (

      <div>
        <h2>Single Page template</h2>
        {this.state.page.map(single => {
            return(
            <div>
              <h1>{single.title.rendered}</h1>
              <p>{single.content.rendered}</p>
            </div>                                        
            );
        })}
      </div>
    );
  }
}

export default Page;

Как я могу визуализировать новые данные в маршрутизаторе, когда я нажимаю другой ссылки? Без перезагрузки страницы в моем браузере.

1 2
reactjs react-router react-router-v4

1 ответ:

componentDidMount выполняется только при монтировании компонента, и при изменении URL переменная slug изменится, но компонент не будет размонтирован и монтирован снова.

Вам нужно будет проверить, изменился ли параметр slug в componentDidUpdate, и получить ваши данные, если это так.

Пример 

class Page extends Component {
  state = {
    page: []
  };

  componentDidMount() {
    this.getPageData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.slug !== this.props.match.params.slug) {
      this.getPageData();
    }
  }

  getPageData = () => {
    axios
      .get(`http://example.com/wp-json/wp/v2/pages?slug=${this.props.match.params.slug}`)
      .then(response => {
        this.setState({ page: response.data });
      })
      .catch(error => {
        console.error(error);
      });
  };

  // ...
}
2