React router v4 - 如何访问通过重定向传递的状态?

2024-04-01

我正在 React 的帮助下制作一个登录页面,当登录成功时,该页面会重定向到另一个页面。让我将登录成功时渲染的组件称为“A”。我想将从数据库获取的数据传递给组件 A,我通过将其传递到“重定向”组件的“状态”属性来实现此目的。但是,我不明白如何在最终呈现组件 A 的“Route”组件中访问此状态。谁能告诉我如何访问?

我的代码如下:

登录.js:

import React from 'react'
import Center from 'react-center'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import isEmpty from 'lodash/isEmpty'
import { browserHistory } from 'react-router'
import { Route, Redirect } from 'react-router-dom'

import Courses from '../pages/Courses'
import Logo from './shared/Logo'
import Routes from './Routes'
import Tiles from './Tiles'

export default class LoginForm extends React.Component
{
    constructor()
    {
        super()

        this.state = 
        {
            username: '',
            password: '',
            student: false,
            instructor: false,
            error_password: '',
            error_username: ''
        }

        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(event)
    {
        this.setState({error_username:'', error_password:'', [event.target.name]: event.target.value})
        console.log(this.state)
        event.preventDefault()
    }

    onSubmit(event)
    {
        event.preventDefault()
        if (this.state.username && this.state.password)
        {
            this.props.loginRequest({username: this.state.username, password: this.state.password})
            .then(response => 
                {
                    this.setState(    // THE SERVER WILL SEND THE RELEVANT DATA HERE
                    {
                        username: '',
                        password: '',
                        student: response.data.student, 
                        error_username: response.data.error_username, 
                        error_password: response.data.error_password
                    })
                })
        }
        else
            this.setState({error_username: 'Please enter username', error_password: 'Please enter password.'})
    }

    render()
    {
        const styles =
        {
            buttonStyle:
            {
                margin: 'auto',
                width: '83'
            }
        }

        if (this.state.student)  ///  REDIRECT IS HAPPENING HERE
        {
            return (
            <Redirect to = {{
                pathname: '/loginS/student',
                state: { course_information }  /// HERE I WILL SEND THE RELEVANT INFORMATION THAT THE SERVER SENDS TO THE COMPONENT A 
            }}/> )
        }
        else if (this.state.instructor)
        {
            return <Redirect to = {'/loginI/instructor'} />
        }
        else 
        {
            // NOT RELEVANT
        }

        return(

            display 
        )
    }
}

LoginForm.propTypes = 
{
    loginRequest: PropTypes.func.isRequired
}

路由.js

import React from 'react'
import { Switch, Route } from 'react-router-dom'

import Courses from '../pages/Courses'
import Login from './Login'
import Dashboard from './Dashboard'
import StudentsHandle from './StudentsHandle'
import CourseItem from './CourseItem'
import SemesterItem from './SemesterItem'
import Logo from './shared/Logo'
import Tiles from './Tiles'

export default class Routes extends React.Component
{
    render() 
    {
        return(
            <Switch>
                <Route exact path = '/' component = { Dashboard }/>
                <Route exact path = '/loginS' component = { Login } />
                <Route path = '/loginS/student' render = { (props) =>  < Tiles data = {this.props.coursesData} />} /> // HOW DO I ACCESS THE PROPS REDIRECT SENDS HERE?
                <Route path = '/instructor' component = { Courses } />
            </Switch>
        );
    }
} 

您可以使用locationprop 来访问您已经通过的状态。访问React-Router https://reacttraining.com/react-router/web/api/location以供参考。当你想访问该状态时,你可以通过this.props.location.state.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React router v4 - 如何访问通过重定向传递的状态? 的相关文章

随机推荐

  • PHP CURL 库中的curl --resolve 等效项

    是否有等效的curl resolve 在 PHP CURL 库中 背景 我有循环 DNS 一个域名解析为多个 IP 并且我想将请求发送到specific主持人 我使用基于 apache 名称的虚拟主机 因此 HTTP 请求中必须出现正确的域
  • 相机 2 CameraCharacteristics 似乎显示不正确的数据

    我已经下载并更改了 Google 的相机 2 基本版 https github com googlesamples android Camera2Basic例子 我的更改增加了对相机设备的迭代并显示了它们的一些特征 我创建了这个函数 pri
  • UIView 与 UIViewController

    好吧 我对 iPhone 开发真的很陌生 而且我已经了解了很多知识 我只需要帮助决定如何将这 4 6 张图片编程到我的项目中 我基本上想制作一本漫画书 用户能够从一张图片滑动到另一张图片 所有这些图片应该在 UIVIEW 还是 UIView
  • 为什么JSP文件不能超过64k

    当我编写 JSP 文件时 我收到错误 它不应超过 64 KB 然后我将代码分解到不同的文件 现在代码正在工作 为什么 JSP 存在这个限制 Java 对方法的大小有 64k 的限制 因此 当 jsp 转换为 jspService 方法时 如
  • 您知道针对多种编程语言的快速参考指南吗? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 在我的工作过程中 我维护多种编程语言的代码 如下所列 由于我还没有掌握其中的大部分内容 所以我一直忘记
  • GitHub 中的相关拉取请求是否可行?

    目前我正在处理一个非常大的拉取请求 为了以某种方式保持代码审查的可管理性 我们的想法是将完整的拉取请求分割成相互依赖的独立部分 一个例子是 拉取请求 1 创建接口 接口 A 和 B 并重构代码 拉取请求 2 接口 A 实现和测试 取决于拉取
  • 水平滚动图像列表

    我正在尝试创建一个水平滚动列表 当启用 Javascript 时 我将用一个奇特的版本替换它 但我希望标记和 css 在相当现代的浏览器上没有 Javascript 的情况下看起来和工作正常 任何以任何方式使用 Javascript 的建议
  • ADFS 2016、MVC 和 WEB.API 令牌和声明

    我目前正在开发一个带有 Web API 后端的 Net MVC 应用程序 这两个应用程序都使用 ADFS 2016 进行身份验证 Web API 本身按预期工作 但是我在 MVC 应用程序本身的 ADFS 配置方面遇到一些问题 基于本指南h
  • WP7 XNA 显示 3D FBX 模型

    我只是初学者 很抱歉我的愚蠢问题 我的模型看起来像这样 http img265 imageshack us img265 8291 clipboard01ap jpg http img265 imageshack us img265 829
  • 在 Python 3 中重新打开关闭的 stringIO 对象

    因此 我创建一个 StringIO 对象来将字符串视为文件 gt gt gt a Me you and them n gt gt gt import io gt gt gt f io StringIO a gt gt gt f read 1
  • 以编程方式退出应用程序的适当方法是什么?

    I am evaluating user inputs as commands for my application If the user presses Q or q and then hits enter the applicatio
  • 收到“无法检查可用内存”。在 Oracle DB 18c 上

    我正在尝试创建一个数据库以完成我的自学 但不幸的是我遇到了意外错误 无法检查可用内存 我正在使用数据库配置助手 DBCA 来完成此操作 我的Oracle数据库版本 添加以下参数来绕过错误 dbca J Doracle assistants
  • 加载图像停止问题

    我有窗户形式 我已经放入了一张加载图像PictureBox 当我加载表单时 我已经设置了 PictureBox1 Visible false 当我触发我设置的按钮的单击事件时 PictureBox1 Visible true 但在这种情况下
  • 静态常量和常量有什么区别?

    有什么区别static const and const 例如 static const int a 5 const int i 5 他们之间有什么区别吗 你什么时候会使用其中一种而不是另一种 static确定函数外部的可见性或内部变量的生命
  • JavaScript 对象的长度

    我有一个 JavaScript 对象 是否有内置或公认的最佳实践方法来获取该对象的长度 const myObject new Object myObject firstname Gareth myObject lastname Simpso
  • Firefox 11 调试器中的 firebug 1.9.1 不起作用

    当我激活脚本面板时 它显示 调试器未激活 但我无法在调试器上使 firebug 中断 或在断点处 我已经重新安装了插件 将其重置为默认设置 删除了 Firefox 配置文件 重新启动计算机 没有任何作用 这个版本一直有效 同样的事情也发生在
  • 使用Luigi,如何读取PostgreSQL数据,然后将这些数据传递到工作流程中的下一个任务?

    Using Luigi https github com spotify luigi 我想定义一个具有两个 阶段 的工作流程 第一个从 PostgreSQL 读取数据 第二个对数据做了一些事情 因此我从子类化开始luigi contrib
  • AttributeError:尝试使用 writerow 时“str”对象没有属性“keys”

    尝试写一个pythonscraper that scrapes从网页到csv文件的数据 如果删除 dataFrameCleaned cleanDataUp dataFrame 行 也尝试改变我编写 python 文件的方式 csvData
  • Node.js 中的每个请求日志记录

    我是一位经验丰富的 Java 开发人员 开始学习 Node js 并转向异步模型 除了日志记录之外 大多数事情都进展顺利 在使用 Express 在 Node js 中进行开发时 我在 Java 中找不到类似于 log4j 和 NDC 的任
  • React router v4 - 如何访问通过重定向传递的状态?

    我正在 React 的帮助下制作一个登录页面 当登录成功时 该页面会重定向到另一个页面 让我将登录成功时渲染的组件称为 A 我想将从数据库获取的数据传递给组件 A 我通过将其传递到 重定向 组件的 状态 属性来实现此目的 但是 我不明白如何