react render blank screen when redirect ( no Switch from react-router-dom )

I am using a template and it uses an old version of react & routing and I want to redirect user to login if not but this template has a different routing method in app.js.

• "react-router-dom": "^4.3.1",

• "react": "^16.6.3",

• "react-dom": "^16.6.3",

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { routes } from "./routes";
import withTracker from "./withTracker";
import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthenticated: false,
    };
    //this.checkAuth = this.checkAuth.bind(this);
  }
 // checkAuth() {}
  componentDidMount() {
    // this.checkAuth();
  }

  render() {
    return (
      <Router basename={process.env.REACT_APP_BASENAME || ""}>
        <div>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              component={withTracker((props) => {
                return (
                  <route.layout {...props}>
                    <route.component {...props} />
                  </route.layout>
                );
              })}
            />
          ))}
        </div>
      </Router>
    );
  }
}
export default App;

and there is routes.js

import React from "react";
import { Redirect } from "react-router-dom";

// Layout Types
import { DefaultLayout } from "./layouts";
import LogLayout from "./layouts/LogLayout";
// Route Views

import TransactionsOverView from "./views/TransactionsOverview";
import TransferList from "./views/TransferList";
import Settings from "./views/Settings";
import History from "./views/History";
import AdminAccsess from "./components/logSign/AdminAccsess";
import TransactionPermission from "./views/TransactionPermission";
import Charge from "./views/Charge";
import Users from "./views/Users";

export const routes = [
  {
    path: "/",
    exact: true,
    layout: DefaultLayout,
    component: () => <Redirect to="/transactions-overview" />,
  },
  {
    path: "/transactions-overview",
    layout: DefaultLayout,
    component: TransactionsOverView,
  },
  {
    path: "/users",
    layout: DefaultLayout,
    component: Users,
  },
  {
    path: "/settings",
    layout: DefaultLayout,
    component: Settings,
  },
  {
    path: "/charge",
    layout: DefaultLayout,
    component: Charge,
  },

  {
    path: "/history",
    layout: DefaultLayout,
    component: History,
  },
  {
    path: "/transfer",
    layout: DefaultLayout,
    component: TransferList,
  },
  {
    path: "/permission",
    layout: DefaultLayout,
    component: TransactionPermission,
  },
  {
    path: "/login",
    layout: LogLayout,
    component: AdminAccsess,
  },
];

I can't use context or hooks and i dont want to use redux just for this I tried to make a condition in app.js, but it always shows blank screen or it redirects without changing to path is there any idea how to solve this?

cant use componentdidmount in routes.js

You can add a property to the routes you want to protect:

Example:

export const routes = [
  {
    path: "/",
    exact: true,
    layout: DefaultLayout,
    component: () => <Redirect to="/transactions-overview" />,
  },
  {
    path: "/transactions-overview",
    layout: DefaultLayout,
    component: TransactionsOverView,
  },
  {
    path: "/users",
    layout: DefaultLayout,
    component: Users,
    isAuth: true,
  },
  {
    path: "/settings",
    layout: DefaultLayout,
    component: Settings,
  },
  {
    path: "/charge",
    layout: DefaultLayout,
    component: Charge,
    isAuth: true,
  },
  {
    path: "/history",
    layout: DefaultLayout,
    component: History,
    isAuth: true,
  },
  {
    path: "/transfer",
    layout: DefaultLayout,
    component: TransferList,
    isAuth: true,
  },
  {
    path: "/permission",
    layout: DefaultLayout,
    component: TransactionPermission,
    isAuth: true,
  },
  {
    path: "/login",
    layout: LogLayout,
    component: AdminAccsess,
  },
];

Then while mapping over the routes check this isAuth property and conditionally render a Redirect to login or the routed component.

Example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthenticated: false,
    };
    //this.checkAuth = this.checkAuth.bind(this);
  }
 // checkAuth() {}
  componentDidMount() {
    // this.checkAuth();
  }

  render() {
    return (
      <Router basename={process.env.REACT_APP_BASENAME || ""}>
        <div>
          {routes.map((route) => {
            const { isAuth, path, exact } = route;

            if (isAuth && !this.state.isAuthenticated) {
              return <Redirect key={path} exact={exact} from={path} to="/login" />;
            }

            return (
              <Route
                key={path}
                path={path}
                exact={exact}
                component={withTracker((props) => (
                  <route.layout {...props}>
                    <route.component {...props} />
                  </route.layout>
                ))}
              />
            );
          })}
        </div>
      </Router>
    );
  }
}