Question

我使用更高阶的组件（PublicRoute）来有条件地渲染另一个组件，具体取决于用户是否经过身份验证。我已经制作了另一个更高阶的组件PrivateRoute，以达到相反的效果。我的想法是，我不希望用户登录后能够访问登录页面，我不希望没有登录的用户查看其他页面。（实际上，这不太可能，除非他们手动输入URL，但我仍然希望确保它不会发生。）

问题是Redirect组件仅在Login组件呈现几秒后才起作用。这似乎是奇怪的行为。状态的auth部分包含一个对象或者为false或null（null是默认状态）。所以不应该有任何问题。 PrivateRoute也会出现同样的问题（例如，未经身份验证的用户仍然可以访问购物车页面。）

PublicRoute.js

export const PublicRoute = ({ 
  isAuthenticated, 
  component: Component,
  ...rest
  }) => (
     <Route 
     {...rest} 
     component={(props) => (!isAuthenticated ? (
        <div>
            <Component {...props}/>
        </div>
    ) : ( <Redirect to="/shop"/> )
    )}/>
);

const mapStateToProps = ({ auth }) => ({ isAuthenticated: !!auth });

export default connect(mapStateToProps)(PublicRoute);

AppRouter.js

  <PublicRoute path="/login" component={Login}/>

Answer 1

您应该将Route与Redirect分开，当您想要使用自定义道具渲染组件时，也可以使用渲染道具代替组件

export const PublicRoute = ({ 
  isAuthenticated, 
  component: Component,
  ...rest
  }) => (
     !isAuthenticated? (
     <Route 
        {...rest} 
        render={(props) => (
           <div>
              <Component {...props}/>
           </div>
        )}
     />) : <Redirect to="/shop"/> 
    )
);

Answer 2

我使用的模式是我使用updateValue(String newText) //updating the recycler adapter of recyclerview one { this.list.set( your_index, newText); // i assume this is a generic string list this.notifyDataSetChanged(); }的{{1}}方法，如下所示：

render

使用connect方法将其连接到Redux状态：

<Route ... />

然后使用import React from "react"; import { Route, Redirect } from "react-router-dom"; import PropTypes from "prop-types"; const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest }) => ( <Route {...rest} render={props => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/my-login-page", state: { from: props.location } }} /> ) } /> ); ProtectedRoute.propTypes = { component: PropTypes.func, location: PropTypes.object, isAuthenticated: PropTypes.bool }; export default ProtectedRoute;作为受保护路由的路由组件 - 否则只需使用常规import { connect } from "react-redux"; import { withRouter } from "react-router"; import ProtectedRoute from "components/shared/ProtectedRoute"; export default withRouter( connect(state => ({ isAuthenticated: true // logic for verifying }))(ProtectedRoute) );。

Answer 3

感谢大家提供替代解决方案。

我刚刚意识到自己的错误。我的auth reducer返回null（默认状态）或false（如果没有经过身份验证的话）。通过使用!!auth将null强制转换为false，当动作生成器被触发时，我无法区分这两者。因此，即使我已登录，它也会将公共路由组件渲染几秒钟，因为在我从请求中获取用户对象之前返回了null。

通过改变我的HOCs中的逻辑来解决这个问题：

对于公共路线：

component={(props) => (auth === false ? (
        <div>
            <Component {...props}/>
        </div>
    ) : ( <Redirect to="/shop"/> )
)}

私人路线：

component={(props) => (auth ? (
        <div>
            <Component {...props}/>
        </div>
    ) : ( <Redirect to="/login"/> )
)}

React Router很难重定向

3 个答案: