React-router-dom-链接更改URL但不呈现 [英] React-router-dom - Link change url but does not render

问题描述

我是React的新手，我做了一个< Link> 可以从dy数据转到下一个或上一个项目(例如，如果我在user/2视图上，则上一个链接转到用户/1，下一个链接转到用户/3)，则正确更改了url，但完全不呈现该组件，并且也根本不重新加载数据.

I'm new to React and I've made a <Link>to go to next or previous item from dy datas(for example, if i am on user/2 view, previous link go to user/1 and next link go to user/3), the url is correctly changed but the component is not rendered at all and the datas are not reloaded at all.

我已经读到这是由于组件未检测到子代未更改状态，所以父组件未呈现.

I've read that it's due to the component not detecting that the children is not changing state so the parent component does not render.

我尝试使用 withRouter ，但出现错误:您不应使用< Route>或在< Router> 之外使用withRouter()，如果有人知道了解决方案并对其做出了一些解释，我不明白自己在做什么，我将不胜感激:)

I've tried to use withRouter but I've got a error : You should not use <Route> or withRouter() outside a <Router> and I'm not understanding what I'm doing so if someone has the solution and some explanation to it I would be grateful :)

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

Single.js:

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;

Header.js:

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;

推荐答案

该解决方案非常简单.您需要做的就是利用 componentWillReceiveProps 并检查参数是否更新，是否确实获取了数据

the solution is pretty-simple. All you need to do is make use of componentWillReceiveProps and check if the param updated, if it did fetch the data again

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

这篇关于React-router-dom-链接更改URL但不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！