React Router Switch did not work properly

Question

I am new to react and trying to create simple navigation which has two menu items (Dashboard and Users). But when I click on Users link it did not render that page content, but dashboard content getting hide. Someone please help me to resolve the issue.

App.js

import React, { Component } from 'react';
import Login from './pages/Login';
import { BrowserRouter as Router, Switch, Route, Link, Redirect, withRouter } from 'react-router-dom';

import { history } from './_helpers/history';
import { authenticationService } from './_services/authentication.service';
import Users from './pages/users/Users';
import Dashboard from './pages/Dashboard';


class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
        currentUser: null
    };
  }


  componentDidMount() {
      authenticationService.currentUser.subscribe(x => this.setState({ currentUser: x }));
  }

  logout() {
      authenticationService.logout();
      history.push('/login');
  }



  render () { 
    const { currentUser } = this.state;
    return (
      currentUser ? (

        <Router>
        <div id="wrapper">  
           <ul>
        <li><Link to={'/'} className="nav-link" > <i className="fas fa-fw  fa-tachometer-alt"></i> <span>Dashboard</span> </Link></li>
          <li><Link to={'/users'} className="nav-link" > <i className="fas fa-fw fa-users"></i> <span>Users</span> </Link></li>
        </ul>

          <Switch>
              <Route path='/' component={Dashboard} />
              <Route path='/users' component={Users} />
          </Switch>

          </div>



      </Router>
      ) : <Login />
  );
 }
}

export default App;

Dashboard.js

import React, { Component } from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { authenticationService } from '../_services/authentication.service';
import { history } from '../_helpers/history';


class Dashboard extends Component {

  constructor (props){
    super(props);

    if (authenticationService.currentUserValue) { 
      history.push('/');
    }

    this.state = {
        isPage: '/'
    }    

  }

    render (){
        if(this.state.isPage == window.location.pathname){
            return (    
                <div className="container">
                    dashboard
                </div>
            )
        }else{
            return '';
        }
    }

  }


export default Dashboard;

Users.js

import React, { Component } from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { authenticationService } from '../../_services/authentication.service';
import { history } from '../../_helpers/history';


class Users extends Component {

  constructor (props){
    super(props);

    if (authenticationService.currentUserValue) { 
      history.push('/');
    }

    this.state = {
        isPage: '/users'
    }

  }

    render (){
        if(this.state.isPage == window.location.pathname){
            return (    
                <div className="container">
                    users
                </div>
            )
        }else{
            return '';
        }

    }

  }


export default Users;

Answer 1

In App.js component; make Switch direct child of Router; that will fix the issue. You can refactor your code like so:

<Router>
    <Switch>
        <div id="wrapper">  
            <ul>
                <li><Link to={'/'} className="nav-link" > <i className="fas fa-fw  fa-tachometer-alt"></i> <span>Dashboard</span> </Link></li>
                <li><Link to={'/users'} className="nav-link" > <i className="fas fa-fw fa-users"></i> <span>Users</span> </Link></li>
            </ul>

            <Route path='/' component={Dashboard} />
            <Route path='/users' component={Users} />
        </div>
    </Switch> 
</Router>

Answer 2

but dashboard content getting hide.

Can you elaborate on that? I'm not quite understanding what you mean.

The problem may lie with your use of react lifecycles. authenticationService.currentUser.subscribe() is set on componentDidMount() so only after the JSX gets mounted to the DOM. Your Users component is checking authenticationService.currentUserValue on the constructor which runs first before it gets mounted. authenticationService.currentUserValue maybe giving you a falsy which will kick you out to /. Console log that value or place those inside a componentDidMount so it will only check after the mount.

constructor (props){
    super(props);

    this.state = {
        isPage: '/users'
    }
  }

  componentDidMount() {
     if (authenticationService.currentUserValue) { 
      history.push('/');
    }
  }