如何通过在react.js中从该组件设置道具来重定向到另一个组件

时间:2019-08-17 04:57:34

标签: reactjs

我通过应用一些自己的逻辑来创建一个简单的登录应用程序。身份验证成功,登录后我需要重定向到另一个组件,并且需要将名称从登录组件获取到我的家庭组件,以便在该组件中显示为“ Welcome -name-”

我尝试将道具传递给,但没有成功

这是我的Login.js:

    import React, { Component } from 'react';
    import axios from 'axios';
    // import Loader from 'react-loader-spinner';
    import { Link, Route, Redirect } from 'react-router-dom';
    import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
    import './Login.css';       
    import Home from '../Home/Home'


    class Login extends Component {     
        state = {
            email: null,
            password: null,
            status: null,
            name: null
        }       
        submitHandler = (event) => {
            event.preventDefault();
            console.log(this.state);
            axios.get("http://localhost:5000/login/" + this.state.email + "/" + this.state.password).then((res) => {
                this.setState({ status: res.status, name: res.data.name });
                console.log(this.state);        
            });     
        }       
        changeHandler = (event) => {
            event.preventDefault();
            const { name, value } = event.target;
            this.setState({ [name]: value });
        }       
        render() {
            const home = <Home />
            return (<div className="wrapper">
                <div className="form-wrapper">
                    <h1>Login</h1>
                    <form onSubmit={this.submitHandler} noValidate>
                        <div className="email">
                            <label htmlFor="email">Email</label>
                            <input type="text" placeholder="Email" name="email" noValidate onChange={this.changeHandler} />
                        </div>
                        <div className="password">
                            <label htmlFor="password">Password</label>
                            <input type="password" placeholder="Password" name="password" noValidate onChange={this.changeHandler} />
                        </div>
                        <div className="login">
                            <button type="submit">Login</button>
                        </div>
                        <div>
                            {((this.state.status) && this.state.status === 200) ? <Redirect to="/home" /> : null}
                        </div>
                    </form>
                </div>
            </div>);
        }

    }

    export default Login;

这是我的Home.js:

    import React from 'react';

    const Home = (props)=>{
        return(<h1>Welcome {props.name}</h1>);
    }
    export default Home;

我只需要在成功提交表单后将Home.js中的输出显示为“ Welcome -name-”。但是,该名称处于Login.js的状态。请帮助我。

3 个答案:

答案 0 :(得分:0)

我相信这是问题所在。将js对象或元素等放入字符串中时,需要指定您要通过将字符串用反引号引起来添加对象。尝试将文本放在标签中的引号中,并在js对象(传递的道具)前加一个美元符号。这让React知道该字符串还将包含js,而不仅仅是文本字符串。在您的情况下,您可能还需要像下面这样的“ this”绑定:

<h1>`Welcome, ${this.props.name}`</h1> 

我不确定如何解释“这个”,也许其他人可以进一步阐明。以下是Home.js文件上下文中的代码更改。

import React from 'react';

const Home = (props)=>{
    return(<h1>`Welcome ${props.name}`</h1>);
}
export default Home;

我希望这会有所帮助!祝您应用愉快:)

答案 1 :(得分:0)

您的选择很少。

  1. 您可以通过查询字符串将其粘贴。但无法通过以下方式访问 道具。
  2. 如果您已经建立了Redux之类的状态管理库, 可以使用登录的个人详细信息设置商店,然后进行连接 Redux商店特定部分的主页。然后,您可以通过道具访问它。
  3. 将记录的用户详细信息存储在浏览器本地存储中(您可能需要以下详细信息 登录用户,而不仅仅是前进的名字)。我认为这种类型 功能方面,这是最好的解决方案。不通过道具传递。这样,这些信息就可以在应用程序中的任何位置轻松获得。

干杯

答案 2 :(得分:0)

您有多个解决此问题的方法,但我注意到您正在使用react-router-dom,因此您可以执行以下操作之一:

  • 将用户名作为url参数传递:

    <Route path="/home/:username" component={Home} />;
    const Home = (props)=>{
      return(<h1>Welcome {props.match.params.username}</h1>);
    }
    

并这样重定向:

<Redirect to="/home/john-doe" />
  • 使用redux将变量存储在全局存储中,并从任何地方访问它们。

constants.js:

export const SET_USERNAME = 'SET_USERNAME'

action.js:

import {SET_USERNAME} from './constants'
export function setUsername(payload) {
  return {
    type: SET_USERNAME,
    payload,
  };
}

reducer.js:

import {
  SET_USERNAME,
} from './constants';

export const initialState = {
  username: '',
};

export function userReducer(state = initialState, action) {
  switch (action.type) {
    case SET_USERNAME:
      return { ...state, username: action.payload }
    default:
      return state;
  }
}

Login.js:

import React, {Component} from 'react';
import axios from 'axios';
// import Loader from 'react-loader-spinner';
import {Link, Route, Redirect} from 'react-router-dom';
import { connect } from 'react-redux';
import {setUsername} from './actions'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import './Login.css';
import Home from '../Home/Home'


class Login extends Component {
  state = {
    email: null,
    password: null,
    status: null,
    name: null
  }
  submitHandler = (event) => {
    event.preventDefault();
    console.log(this.state);
    axios.get("http://localhost:5000/login/" + this.state.email + "/" + this.state.password).then((res) => {
      this.setState({status: res.status, name: res.data.name});
      this.props.setUsername(res.data.name) // Here you set the username in your redux store
      console.log(this.state);
    });
  }
  changeHandler = (event) => {
    event.preventDefault();
    const {name, value} = event.target;
    this.setState({[name]: value});
  }

  render() {
    const home = <Home/>
    return (<div className="wrapper">
      <div className="form-wrapper">
        <h1>Login</h1>
        <form onSubmit={this.submitHandler} noValidate>
          <div className="email">
            <label htmlFor="email">Email</label>
            <input type="text" placeholder="Email" name="email" noValidate onChange={this.changeHandler}/>
          </div>
          <div className="password">
            <label htmlFor="password">Password</label>
            <input type="password" placeholder="Password" name="password" noValidate onChange={this.changeHandler}/>
          </div>
          <div className="login">
            <button type="submit">Login</button>
          </div>
          <div>
            {((this.state.status) && this.state.status === 200) ? <Redirect to="/home"/> : null}
          </div>
        </form>
      </div>
    </div>);
  }

}

export function mapDispatchToProps(dispatch) {
  return {
    setUsername: username => dispatch(setUsername(username)),
  };
}

const withConnect = connect(
  null,
  mapDispatchToProps,
);

export default withConnect(Login);

Home.js:

import React, {Component} from 'react';
import { connect } from 'react-redux';
class Home extends Component{
  render(){
    const {username} = this.props;
    return(<h1>`Welcome ${username}`</h1>);
  }
}

function mapStateToProps(state) {
  const { username } = state.user;
  return { username };
}

const withConnect = connect(mapStateToProps);

export default withConnect(Home);
  • 使用cookie存储已登录用户的用户名。
import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('username', username);

实际上,可能还有其他多种解决方案,但这是我想到的事情。希望对您有帮助!