zoukankan      html  css  js  c++  java
  • [React Router] Create a ProtectedRoute Component in React Router (setState callback to force update)

    In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine if the route should be allowed to be accessed. Finally we'll use nav state to preserve the location the user visited and redirect them back to the protected route once they login.

    1. Create a ProtectedRoute is nothing but just a react component render a Route component:

    • check the 'loggedIn' props, if true, then using render prop to render the component normally.
    • If 'loggedIn' props is false, then use 'Redirect' component to redirect to Home page. also pass the route state.
    const ProtectedRoute = ({ component: Comp, loggedIn, path, ...rest }) => {
      return (
        <Route
          path={path}
          {...rest}
          render={(props) => {
            return loggedIn ? (
              <Comp {...props} />
            ) : (
              <Redirect
                to={{
                  pathname: "/",
                  state: {
                    prevLocation: path,
                    error: "You need to login first!",
                  },
                }}
              />
            );
          }}
        />
      );
    };

    2. When the login button is clicked, we want to force udpate the state using callback in setState:

        this.setState(
          {
            loggedIn: true,
          },
          () => {
            this.props.history.push(prevLocation || "/");
          },
        );
      };

    setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below. Link

  • 相关阅读:
    redis五中数据类型
    MySQL索引
    mysql中如何设计计数器表(待续)
    mysql 数据类型选择原则
    1.开篇(听说你还在艰难的啃react源码)
    关于wamp的HTML, PHP, mysql 三者的操作与联系
    关于wamp的HTML, PHP, mysql 三者的操作与联系
    关于wamp的HTML, PHP, mysql 三者的操作与联系
    SQL server T-sql语句查询执行顺序
    SQL server T-SQL索引详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8746827.html
Copyright © 2011-2022 走看看