reactjs - 带有未渲染/刷新参数的 React Router v4 路由

Question

我有一个动态参数的路线。例如当 url 是 my-app.com/about它将从关于页面的 REST API 获取 JSON 数据。我为所有 URL 参数使用了一个名为 Page 的组件。

当我单击导航链接时，网址会发生变化，但除非刷新页面，否则不会呈现新内容。

我的代码:

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;

当我单击不同的链接时，如何在路由器中呈现新数据？无需在浏览器中重新加载页面。

Answer 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);
      });
  };

  // ...
}