ComponentDidMount is not getting called using Link to=“”


(Ashwin Morey) #1

I have three components to add/view and list users. All of which are getting called from the main container’s componentDidMount and render() method based on this.props.match.path property. Please find the container code below:

import React, { Component } from 'react';
import { UsersList, ViewUser, AddUser } from '../components';
import { getUsers, getUserDetails } from '../actions';

class Users extends Component {

    componentDidMount() {
        switch (this.props.match.path) {
            case '/users/:id':
                this.props.getUserDetails(this.props.match.params.id);
                break;
            case '/users/add':
                break;
            case '/users':
                this.props.getUsers();
                break;
        }
    }


    render() {
        return (
            <div>
                {
                    this.props.match.path === '/users/add' ? <AddUser onSubmit={this.submit} /> :
                        this.props.match.path === '/users/:id' ? <ViewUser user={this.props.user} /> :
                            <UsersList users={this.props.users} />
                }
            </div>
        )
    }
}

The code in the router file is as below:

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '@progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';

export default () => (
    <BrowserRouter>
        <div>
            <div className="col-xs-12 col-sm-6 col-md-12">
                <header className="App-header">
                    <h1 className="App-title">TestUsers</h1>
                </header>
                <Menu>
                    <MenuItem>
                        <Link to="/users">Users</Link>
                    </MenuItem>
                    <MenuItem>
                        Shelves
                        </MenuItem>
                    <MenuItem>
                        Products
                    </MenuItem>
                </Menu>
            </div>
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>
)

When I go do addUser component and click on the User’s menu to load list of all the users, the component is rendered correctly. But the ComponentDidMount method is not getting called, where the code to retrieve user’s from the db exists. Hence the grid is empty. Could anyone let me know, what should ideally be done in this case ? Basically I want to load the list of user’s once we go back to /users url.

Thanks


(Craig Beck) #2

It’s probably not getting called because it is already mounted.

You are using the same Users component for multiple routes, so when you navigate to the first route (/users/add) the component mounts and componentDidMount would be called. Navigating to the /users/ route at this pint would just rerender the same component (which is already mounted)

I’d suggest ditching the Users component and using the AddUser, ViewUser, and UsersList components as the components for your routes (adding the specific logic for fetching for each to the component)