React router renders component once after that only url changes

Question

I am having a navbar and a side bar for my page.

Navbar consists of home and blogs

Blogs will render BlogHome Component which will fetch links from db and on click of any link will render BlogContent component.

Lets say the side bar has Blog1,Blog2 and Blog3 listed. If I click Blog1 it renders Blog1's content properly to its side, but if I click Blog2 again it just changes URL but not the Blog2's content.

Please take a look at my code:

Navbar.js

      <Router>
            <Container className="p-0" fluid={true}>
                <Navbar className="border-bottom" bg="transparent" expand="lg">
                    <Navbar.Brand>{global.config.appname}</Navbar.Brand>
                    <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
                    <Navbar.Collapse id="navbar-toggle">
                        <Nav className="ml-auto">
                            <Link className="nav-link" to="/">Home</Link>
                            <Link className="nav-link" to="/blogs/main">Blogs</Link>
                            <Link className="nav-link" to="/contact">Contact</Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                </Container>
                <Switch>
                    <Route exact path="/" component={Home}></Route>
                    <Route exact path="/blogs/main" component={BlogHome}></Route>
                </Switch>
            </Router>

BlogHome.js

export default class BlogHome extends Component {
    constructor(props)
    {
        super(props);
        this.state = { data: null,route:null };
    }
    componentDidMount = () => {
        console.log("BlogHome");
        BlogDataService.getAll().then(data => {
            let data_temp = []
            let cnt = 0;
            for (let item of data.data) {

                data_temp.push(
                <MenuItem key={cnt++} icon={<FaBlog />}>
                    <Link to={"/blogs/main/" + item.id}>{item.title}</Link>
                </MenuItem>
                );
                
            }
            this.setState({ data: data_temp });
        })
    }
    render() {
        return (
            <Router>
                <div style={{ display: "flex" }}>
                <ProSidebar>
                    <Menu iconShape="square">
                        {this.state.data}
                    </Menu>
                </ProSidebar>
                    
                <Switch>
                    <Route exact path={"/blogs/main/:blogId"} component={BlogContent}></Route>
                </Switch>
                </div>
            </Router>
        );
    }
}

BlogContent.js

export default class BlogContent extends Component {
    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        this.state = {
            contentState,
            item_id: this.props.match.params.blogId,
            title:null
        }
        console.log(this.props.match);
    }

    onContentStateChange: function = (contentState) => {
        this.setState({
            contentState,
        });
    };
    componentDidMount = () => {
        BlogDataService.get(this.state.item_id).then(data => {
            console.log(data);
            this.setState({ title: data.data.title })
        });
    }
    render() {
        const { contentState } = this.state;
        return (
            <Router>
            <div style={{padding:"10px"}}>
                <div style={{padding:"50px",fontSize:"50px"}}>
                    {this.state.title}
                </div>
            <Editor
                wrapperClassName="demo-wrapper"
                editorClassName="demo-editor"
                onContentStateChange={this.onContentStateChange}
                    />
            <Route exact path={"/blogs/main/1"} component={BlogContent}></Route>
                </div>
            </Router>
        );
    }
}

Thank you for reading :)

Answer 1

your item_id is set only one time and it is not changing at all. On first time when component load it will work but when you are doing second time you are passing new item id but component is not aware about this change hence not able to do anything.

Try to create a function which fetch data. Same function call it in componentDidmount. Now when it is getting new props it is time to check . Use componentDidUpdate.

componentDidUpdate(prevProps, prevState){ 
   if(prevProps.blogId != this.props.blogId){
        this.setState({
           item_id: this.props.blogId 
       }, () => { call the function to get the data } )
  }
}