title: react render blank screen when redirect ( no Switch from react-router-dom )
body: <p>im using templete and it use old version of react &amp; routing
  i want to redirect user to login if not
  but this templet have diffrent routing method
  in app.js</p>
  <ul>
  <li><p>&quot;react-router-dom&quot;: &quot;^4.3.1&quot;,</p>
  </li>
  <li><p>&quot;react&quot;: &quot;^16.6.3&quot;,</p>
  </li>
  <li><p>&quot;react-dom&quot;: &quot;^16.6.3&quot;,</p>
  </li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { BrowserRouter as Router, Route } from &quot;react-router-dom&quot;;
  import { routes } from &quot;./routes&quot;;
  import withTracker from &quot;./withTracker&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import &quot;./shards-dashboard/styles/shards-dashboards.1.1.0.min.css&quot;;
  
  
  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 (
        &lt;Router basename={process.env.REACT_APP_BASENAME || &quot;&quot;}&gt;
          &lt;div&gt;
            {routes.map((route, index) =&gt; (
              &lt;Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={withTracker((props) =&gt; {
                  return (
                    &lt;route.layout {...props}&gt;
                      &lt;route.component {...props} /&gt;
                    &lt;/route.layout&gt;
                  );
                })}
              /&gt;
            ))}
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  export default App;
  </code></pre>
  <p>and there is routes.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { Redirect } from &quot;react-router-dom&quot;;
  
  // Layout Types
  import { DefaultLayout } from &quot;./layouts&quot;;
  import LogLayout from &quot;./layouts/LogLayout&quot;;
  // Route Views
  
  import TransactionsOverView from &quot;./views/TransactionsOverview&quot;;
  import TransferList from &quot;./views/TransferList&quot;;
  import Settings from &quot;./views/Settings&quot;;
  import History from &quot;./views/History&quot;;
  import AdminAccsess from &quot;./components/logSign/AdminAccsess&quot;;
  import TransactionPermission from &quot;./views/TransactionPermission&quot;;
  import Charge from &quot;./views/Charge&quot;;
  import Users from &quot;./views/Users&quot;;
  
  export const routes = [
    {
      path: &quot;/&quot;,
      exact: true,
      layout: DefaultLayout,
      component: () =&gt; &lt;Redirect to=&quot;/transactions-overview&quot; /&gt;,
    },
    {
      path: &quot;/transactions-overview&quot;,
      layout: DefaultLayout,
      component: TransactionsOverView,
    },
    {
      path: &quot;/users&quot;,
      layout: DefaultLayout,
      component: Users,
    },
    {
      path: &quot;/settings&quot;,
      layout: DefaultLayout,
      component: Settings,
    },
    {
      path: &quot;/charge&quot;,
      layout: DefaultLayout,
      component: Charge,
    },
  
    {
      path: &quot;/history&quot;,
      layout: DefaultLayout,
      component: History,
    },
    {
      path: &quot;/transfer&quot;,
      layout: DefaultLayout,
      component: TransferList,
    },
    {
      path: &quot;/permission&quot;,
      layout: DefaultLayout,
      component: TransactionPermission,
    },
    {
      path: &quot;/login&quot;,
      layout: LogLayout,
      component: AdminAccsess,
    },
  ];
  
  </code></pre>
  <p>cant use context or hooks and i dont want to use redux just for this
  i tried make condition in app.js
  but it always show blank screen
  or it redirect without changing to path
  is there any idea how to solve this</p>
  <p>cant use componentdidmount in routes.js</p>