Having Issues Trying To Re-direct User Based On State , Using React-router

my app component redirects a used based if they are logged in = true, I used an online example after trying various methods, if there is a more simple functional react way to do it

Solution 1:

I did it by below code -

importReact, { Component } from'react';
import { BrowserRouter, Route, Switch, Redirect } from'react-router-dom';
import { baseURL } from'./components/action';
import'./App.css';
importTopNavBarfrom'./components/TopNavBar';
importSideNavBarfrom'./components/sideNavBar';
importFooterfrom'./components/footer';
importDashBoardfrom'./components/dashBoard';
importMediafrom'./components/media';
importLoginfrom'./components/Login';
importRegistrationfrom'./components/Registration';
importChangePasswordfrom'./components/changePassword';
importForgotPasswordfrom'./components/forgotPassword';
importMyProfilefrom'./components/myProfile';
importPageNotFoundfrom'./components/pageNotFound';

classAppextendsComponent {
  render() {
    if (
      localStorage.getItem('token') !== undefined &&
      localStorage.getItem('token') !== '' &&
      localStorage.getItem('token') !== null
    ) {
      var token = localStorage.getItem('token');
    }

    const defaultparams = { params: { p1: '', p2: '' } };

    return (
      <BrowserRouterbasename={baseURL}><div>
          {token ? <TopNavBar /> : ''}
          {token ? <SideNavBar /> : ''}
          <divclassName="page_content"><Switch><Routepath="/"exactrender={() => {
                  return token ? (
                    <DashBoard />
                  ) : (
                    <Loginmatch={defaultparams} />
                  );
                }}
              />
              <Routepath="/dashboard"render={() => {
                  return token ? <DashBoard /> : <Redirectto="/login" />;
                }}
              />
              <Routepath="/media"render={() => {
                  return token ? <Media /> : <Redirectto="/login" />;
                }}
              />
              <Routepath="/login/:p1?/:p2?"component={Login} /><Routepath="/signup"render={() => {
                  return token ? (
                    <Redirectto="/dashboard" />
                  ) : (
                    <Registration />
                  );
                }}
              />
              <Routepath="/forgotpassword"render={() => {
                  return token ? (
                    <Redirectto="/dashboard" />
                  ) : (
                    <ForgotPassword />
                  );
                }}
              />
              <Routepath="/changepassword"render={() => {
                  return token ? <ChangePassword /> : <Redirectto="/login" />;
                }}
              />
              <Routepath="/myprofile"render={() => {
                  return token ? <MyProfile /> : <Redirectto="/login" />;
                }}
              />
              <Routepath=""component={PageNotFound} /></Switch></div><Footer /></div></BrowserRouter>
    );
  }
}

exportdefaultApp;

You need to check token. If exists then load the component otherwise redirect the user.