Ad

React Render Blank Screen When Redirect ( No Switch From React-router-dom )

im using templete and it use old version of react & routing i want to redirect user to login if not but this templet have diffrent 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,
  },
];

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

cant use componentdidmount in routes.js

Ad

Answer

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>
    );
  }
}
Ad
source: stackoverflow.com
Ad