React fetch by route

Question

I have page on route /journal/:id and then I want to fetch data from api with that 'id'. I add fetch to componentDidMount but page don't change if I already on page from route /journal/:id and use from that page to other /journal/:id.

Seems that it exists other way to do that. Please help.

here is code:

//router page
<Route component={ListLayout}>
      <Route path="/journals" component={Journals} />
      <Route path="/journal/:id" component={Journal} />
      <Route path="/shelves" component={Shelves} />
</Route>


export default class Journal extends Component {



    state = {
        reader: false,
        journal: {}
      }

      componentWillMount(){
        const myHeaders = new Headers();

        myHeaders.append('X-User-Agent', '84e6f2c45955b65b');

        const myInit = { method: 'GET',
                       headers: myHeaders//,
                       //mode: 'cors',
                       //cache: 'default'
                     };

        const myRequest = new Request(`/issues/${this.props.location.pathname.split('/').pop()}`,
        myInit);
        fetch(myRequest)
          .then(response => {
            return response.json();
           })
          .then(data => {
            console.log(data);
            this.setState({journal: data.data});
          })
          .catch( console.log );
      }
    render() {
        let { journal } = this.state;
    <div className="JournalPage__Title">{journal.magazine_title}</div>
                  <div className="JournalPage__Description">{journal.description}</div>
    <Link to="/journal/432">Test fetch</Link>
    }

}

Answer 1

When you are changing just the params, the component isn't loaded again, however it has received new props, so you need to call API from componentWillReceiveProps again after performing a param check. I will refactor the Code to something like this.

P.S. You can get the path params directly with this.props.location.params. If you are using react-router v4 see this answer on how to get the params from path

Get path params in react-router v4

export default class Journal extends Component {



    state = {
        reader: false,
        journal: {}
      }

      componentWillMount(){
            APIRequest(this.props.location.params);
      }
      componentWillReceiveProps(nextProps){
           const {params: nextParams} = nextProps.location;
           const {params} = this.props.location;
           if(params.id !== nextParams.id) {
                APIRequest(nextParams.id);
           }
      }
    APIRequest = (id) => {
        const myHeaders = new Headers();

        myHeaders.append('X-User-Agent', '84e6f2c45955b65b');

        const myInit = { method: 'GET',
                       headers: myHeaders//,
                       //mode: 'cors',
                       //cache: 'default'
                     };

        const myRequest = new Request(`/issues/${id}`,
        myInit);
        fetch(myRequest)
          .then(response => {
            return response.json();
           })
          .then(data => {
            console.log(data);
            this.setState({journal: data.data});
          })
          .catch( console.log );
    }
    render() {
        let { journal } = this.state;
    <div className="JournalPage__Title">{journal.magazine_title}</div>
                  <div className="JournalPage__Description">{journal.description}</div>
    <Link to="/journal/432">Test fetch</Link>
    }

}