Javascript React router dom-链接更改url但不呈现

我是新的反应者，我已经做了一个

从dy数据转到下一个或上一个项目（例如，如果我在用户/2视图上，上一个链接转到用户/1，下一个链接转到用户/3），url已正确更改，但组件根本没有呈现，数据根本没有重新加载

我读到这是由于组件没有检测到子组件没有改变状态，所以父组件没有渲染

我曾尝试将

与路由器一起使用

，但我遇到了一个错误：

您不应该在

之外使用或与路由器（）一起使用，我不明白我在做什么，如果有人有解决方案和一些解释，我将不胜感激：）

App.js：

import React, { Component } from 'react';
import {
  Route,
  Switch,
  withRouter,
} from 'react-router-dom';


import HomePage from './pages/home';
import SinglePage from './pages/single';

class App extends Component {



  render() {


    return (
      <Switch>
        <div>
          <Route exact path="/" component={HomePage} />
          <Route path="/:id" component={SinglePage} />
        </div>
      </Switch>
    );
  }
}

export default withRouter(App);

import React，{Component}来自'React'；
进口{
路线,，
转换
用路由器，
}从“反应路由器dom”；
从“./pages/home”导入主页；
从“./pages/single”导入单页；
类应用程序扩展组件{
render（）{
返回(
);
}
}
使用路由器（App）导出默认值；

Single.js：

import React, { Component } from 'react';
import Details from '../components/details'
import Header from '../components/header'
import { ProgressBar } from 'react-materialize';

class SinglePage extends Component {

  constructor(props) {
    super(props);

    this.state = {
      data: { data: null },
    }
  }

    componentDidMount() {
        fetch(`http://localhost:1337/${this.props.match.params.id}`)
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
    }

  render() {

    const { data } = this.state;

    return (

      <div>

        <h2> SinglePage </h2>

        {!data ? (
          <ProgressBar />
        ) : (
          <div>
            <Header id={this.props.match.params.id} />
            <Details item={data} />
          </div>
        )}
      </div>
    );
  }

}

export default SinglePage;

import React，{Component}来自'React'；
从“../components/Details”导入详细信息
从“../components/Header”导入标题
从“react materialize”导入{ProgressBar}；
类SinglePage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{data:null}，
}
}
componentDidMount（）{
取回(`http://localhost:1337/${this.props.match.params.id}`）
.然后（（res）=>res.json（））
。然后（（json）=>{
这是我的国家({
数据：json，
});
});
}
render（）{
const{data}=this.state；
返回(
单页
{！数据(
) : (
)}
);
}
}
导出默认单页；

Header.js：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link, withRouter } from 'react-router-dom';

class Header extends Component {

  static propTypes = {
    item: PropTypes.shape({
      data: PropTypes.string.isRequired,
    }).isRequired,
  }

    render() {
        const prev = parseInt(this.props.id) - 1
        const next = parseInt(this.props.id) + 1

        return (
            <div>
                <Link to="/"> Retour </Link>
                <Link to={`/${prev}`}> Précédent </Link>
                <Link to={`/${next}`}> Suivant </Link>
            </div>
        )
    }
}

export default Header;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“react router dom”导入{Link，withRouter}；
类头扩展组件{
静态类型={
项目：PropTypes.shape({
数据：需要PropTypes.string.isRequired，
}).要求，
}
render（）{
const prev=parseInt（this.props.id）-1
const next=parseInt（this.props.id）+1
返回(
复述
公关部
苏万特
)
}
}
导出默认标题；

解决方案非常简单。您所需要做的就是使用

组件willreceiveprops

并检查参数是否更新，是否再次获取数据

componentDidMount() {
    this.getData(this.props.match.params.id);  
}

componentWillReceiveProps(nextProps) {
   if(this.props.match.params.id !== nextProps.match.params.id) {
       this.getData(nextProps.match.params.id);
   }
}

getData = (param) => {
   fetch(`http://localhost:1337/${params}`)
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
}

---

解决方案非常简单。您所需要做的就是使用

组件willreceiveprops

并检查参数是否更新，是否再次获取数据

componentDidMount() {
    this.getData(this.props.match.params.id);  
}

componentWillReceiveProps(nextProps) {
   if(this.props.match.params.id !== nextProps.match.params.id) {
       this.getData(nextProps.match.params.id);
   }
}

getData = (param) => {
   fetch(`http://localhost:1337/${params}`)
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
}