Question

我有一条动态参数路由。例如，当url为my-app.com/about时，它将从REST API中获取about页面的JSON数据。我将一个名为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;

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

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

  // ...
}

使用不渲染/刷新参数的React Router v4路由

1 个答案: