Question

如果用户已登录，我想将信息发送到第二页。我想使用上下文。关于我的代码：

const Login = () => {
...
const [logged, setLogged] = React.useState(0);
... 
const log = () => {
    if (tempLogin.login === "Login" && tempLogin.password == "Haslo") {
      setLogged(1);
    }

...
  return (
  {logged == 1 && (
          <Redirect to="/page" />
      )}

我想将logged发送到/page，但我不知道如何发送。没有任何指南可以帮助我。Page实际上是空的React文件。

Answer 1

有两种处理方法：

将state传递到路线（如unused_data中所述）：

  {logged == 1 && (
          <Redirect to={{ path: "/page", state: { isLoggedIn: true } }} />
      )}

在/page路由下的组件将访问该标记为this.props.location.state.isLoggedIn

利用某些全局应用程序状态（Redux，根目录级别为<Provider>的Context API或类似的东西）。

对我来说，第二种方法更适合保留身份验证信息：

可能不仅只有一个目标组件要检查用户是否被授权
我希望您需要存储一些授权数据以与新请求一起发送（例如JWT令牌），因此仅在单个组件中可访问的布尔flah是不够的。
可能需要在不同组件中而不是单个组件中对诸如logout()或refreshToken()之类的身份验证信息进行某些操作。

但最终取决于您。

Answer 2

感谢 skyboyer 我用Context方法解决了这个问题。我会告诉你我该怎么做，因为也许有人会遇到同样的问题我创建了新文件

import React from "react";
import { Redirect } from "react-router";
const LoginInfo = React.createContext();

export const LoginInfoProvider = props => {
  const [infoLog, setInfoLog] = React.useState("");
  const login = name => {
    setInfoLog(name);
  };
  const logout = () => {
    setInfoLog("old");
  };
  const { children } = props;
  return (
    <LoginInfo.Provider
      value={{
        login: login,
        logout: logout,
        infolog: infoLog
      }}
    >
      {children}
    </LoginInfo.Provider>
  );
};
export const LoginInfoConsumer = LoginInfo.Consumer;

在App.js中添加LoginInfoProvider

<Router>
 <LoginInfoProvider>
  <Route exact path="/" component={Login} />
  <Route path="/register" component={Register} />
  <Route path="/page" component={Page} />
 </LoginInfoProvider>
</Router>

在登录页面（我的问题中的部分代码）中，我添加了LoginInfoConsumer

<LoginInfoConsumer>

如何将上下文与重定向连接

2 个答案: