Reactjs React路由器v4路由的参数未呈现/刷新

我有一个动态参数的路径。例如，当url为

myapp.com/about

时，它将从RESTAPI获取关于页面的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>

    );
  }
}

类应用程序扩展组件{
render（）{
返回(
家
关于
接触
);
}
}

我的页面组件。我正在获取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;

import React，{Component}来自'React'；
从“axios”导入axios；
类页面扩展组件{
构造函数（）{
超级（）；
此.state={
页码：[]
};
}
componentDidMount（）{
axios.get（）http://example.com/wp-json/wp/v2/pages?slug=“+this.props.match.params.slug）
。然后（响应=>{
this.setState（{page:response.data}）；
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
返回(
单页模板
{this.state.page.map（single=>{
返回(
{single.title.rendered}
{single.content.rendered}

);
})}
);
}
}
导出默认页面；

---

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

componentDidMount

仅在安装组件时运行，当URL更改时，

slug

变量将更改，但不会卸载并再次安装组件

您必须检查

componentdiddupdate

中的

slug

参数是否已更改，如果是这样，请获取数据

示例

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特定的问题中标记js有什么意义，一个js的极客，但对react不太熟悉，如何在这方面有所帮助：）顺便说一句，你做得很好，看到了图表，它令人惊讶：）@MayankShukla谢谢。我认为有相当多的JavaScript重叠，它还提供语法突出显示。但你是对的，在这个问题上不是这样的。