时间戳

首页 > 解决方案 > 登录页面不使用 React Router ProtectedRoute 呈现

reactjs - 登录页面不使用 React Router ProtectedRoute 呈现

问题描述

我有一个反应路由器应用程序：

    export default () => (
  <Router basename={process.env.REACT_APP_BASENAME || ""}>
    <div>
      {routes.map((route, index) => {
        return (
          <PrivateRoute
            key={index}
            path={route.path}
            exact={route.exact}
            component={props => {
              return (
                <route.layout {...props}>
                  <route.component {...props} />
                </route.layout>
              );
            }}
          />
        );
      })}
    </div>
  </Router>
);

这将根据单击的路线呈现不同的视图。路线将基于routes.js文件中的此对象呈现：

    export default [
        {
    path: "/login",
    layout: DefaultLayout,
    component: LogIn
  },    .....]

为了构建一些身份验证，我将 a 定义PrivateRoute为：

    const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
)

但是，当我将应用程序设置为使用 PrivateRoute 而不是普通路由（在第一个片段中）时，重定向不使用路由对象。如何更改登录页面的 PrivateRoute const 以反映我原来的 React Route 架构？最佳做法是什么？

标签： reactjsauthenticationreact-router

解决方案

我建议更改您的私人路线如下

const PrivateRoute = ({ component: Component, ...rest }) => fakeAuth.isAuthenticated === true ? (
  <Route {...rest} component={component}
  )} />
) : <Redirect to='/login' />;

推荐阅读