preact-router not working properly whenever click hyper link

Question

I'm currently developing Preact for my small project. One of my page is Master Detail page. Left side is detail page and right side is list page. Problem is whenever I click link on right side list page, detail page not rendered as getting stuck but render correctly when reload page. Please help me how to solve it.

left side

fetchAPI(url) {
    return fetch(url)
        .then((response) => {
            if (response.status >= 400) {
                throw new Error('Bad response from server');
            }
            return response.json();
        });
}

componentDidMount() {
    const that = this;
    const url = 'https://blah.com/' + this.props.courseId;
    const instituteUrl = 'https://blah.com/';

    this.fetchAPI(url).then((data) => {
        this.fetchAPI(instituteUrl + data.institute_id).then((instituteData) => {
            that.setState({
                result: data,
                institute: data.institute,
                courses: instituteData.courses.rows
            });
        });
    });
}

componentWillUnmount() {

}

render({ }, { result={}, institute={}, courses=['', '', '', '', '', '', '', '', '', ''] }) {
    return (
        <div class={style.category}>
            <div class={style.content}>
                <Title title={result.title} />
                <SubTitle subtitle={institute.name} />
                <Description description={result.html_description} />
            </div>
            <div class={style.listContent}>
                { courses.map( result => (
                    <CoursesList result={result} target="_parent" />
                )) }
            </div>
        </div>
    );
}

right list

export default class CoursesList extends Component {
    render() {
        if (this.props.result.title && this.props.result.title !== '') {
            return (
                <div class={style.coursesList}>
                    <div class={style.withpreview}>
                        <Link href={'/course/' + changeSlug(this.props.result.title) + '/' + this.props.result.id}>{this.props.result.title}</Link>
                    </div>
                </div>
            );
        } else {
            return (
                <div class={style.coursesList}>
                    <div class={style.withoutpreview}></div>
                </div>
            );
        }
    }
}

Answer 1

You are only calling this.fetchAPI(url) in componentDidMount . If for all the courses, the same component is used, it will not be mounted again and again but only once. Rather only new props will passed upon changing the URL.

You should call this.fetchAPI(url) in componentWillReceiveProps / componentWillUpdate (which is called on change of props and that should solve your problem