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 ponent is not rendered at all and the datas are not reloaded at all.

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

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="/" ponent={HomePage} />
          <Route path="/:id" ponent={SinglePage} />
        </div>
      </Switch>
    );
  }
}

export default withRouter(App);

Single.js :

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

class SinglePage extends Component {

  constructor(props) {
    super(props);

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

    ponentDidMount() {
        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 :

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;

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 ponent is not rendered at all and the datas are not reloaded at all.

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

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="/" ponent={HomePage} />
          <Route path="/:id" ponent={SinglePage} />
        </div>
      </Switch>
    );
  }
}

export default withRouter(App);

Single.js :

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

class SinglePage extends Component {

  constructor(props) {
    super(props);

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

    ponentDidMount() {
        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 :

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;

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow asked Nov 10, 2017 at 11:31 Charles DuporgeCharles Duporge 68233 gold badges1313 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

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

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