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

CodePudding user response：

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>
    );
  }
}

CodePudding user response：

You should give isLogin data from redux and declare a condition inside a '/' route. like this:

{
 path: "/",
 exact: true,
 layout: DefaultLayout,
 component: isLogin ? Home : Login,
},

just i think you should declare routes inside the main component for accessing to isLogin props.