重定向時反應呈現空白螢屏（沒有從react-router-dom切換）

我正在使用模板，它使用舊版本的反應和路由我想重定向用戶登錄，如果不是，但這個模板在 app.js 中有不同的路由方法

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

• “反應”：“^16.6.3”，

• “反應域”：“^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;

并且有 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,
  },
];

不能使用背景關系或鉤子，我不想僅僅為此使用 redux 我嘗試在 app.js 中創建條件，但它總是顯示空白螢屏或它重定向而不更改到路徑有任何想法如何解決這個問題

無法在 routes.js 中使用 componentdidmount

uj5u.com熱心網友回復：

您可以向要保護的路由添加屬性：

例子：

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,
  },
];

然后在映射路由時檢查此isAuth屬性并有條件地呈現Redirect登錄或路由組件。

例子：

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

uj5u.com熱心網友回復：

您應該從 redux 提供 isLogin 資料并在 '/' 路由中宣告一個條件。像這樣：

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

只是我認為您應該在主要組件中宣告路由以訪問 isLogin 道具。

標籤：javascript 反应 验证 路线 反应路由器

上一篇：laravel護照可選認證

下一篇：GOGCPSDK授權代碼連接gcp專案