reactjs – React router v4 – 如何访问通过Redirect传递的状态
发布时间:2020-12-15 05:06:16 所属栏目:百科 来源:网络整理
导读:我正在使用react的帮助创建一个登录页面,当登录成功时,该页面会重定向到另一个页面.让我调用登录成功’A’时呈现的组件.我想将从数据库中提取的数据传递给组件A,我通过将其传递到“重定向”组件的“state”属性来实现.但是,我不明白如何在’Route’组件中访
我正在使用react的帮助创建一个登录页面,当登录成功时,该页面会重定向到另一个页面.让我调用登录成功’A’时呈现的组件.我想将从数据库中提取的数据传递给组件A,我通过将其传递到“重定向”组件的“state”属性来实现.但是,我不明白如何在’Route’组件中访问最终呈现组件A的状态.任何人都可以告诉我如何?
我的代码如下: Login.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: '',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 } Routes.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> ); } }
您可以使用位置道具来访问您已通过的州.访问
React-Router以供参考.如果要访问该状态,可以通过this.props.location.state执行此操作.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |