重定向时反应渲染空白屏幕（没有从 react-router-dom 切换）

Question

我正在使用模板，它使用旧版本的反应和路由如果没有，我想重定向用户登录但是这个模板有不同的路由方法在 app.js

"react-router-dom": "^4.3.1",
"反应": "^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;

还有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

Answer 1

您应该从 redux 提供 isLogin 数据并在“/”路由内声明一个条件。像这样：

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

只是我认为您应该在主要组件内声明路由以访问 isLogin 道具。

Answer 2

您可以在要保护的路由中添加属性：

示例：

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

重定向时反应渲染空白屏幕（没有从 react-router-dom 切换）

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

javascript

authentication

routes

reactjs

react-router