使用history.push时如何重定向到另一个端口?

时间:2019-08-19 18:55:41

标签: javascript node.js reactjs

我有一个使用端口3000的登录/注册应用程序和使用端口3001的to_do_list应用程序。该登录/注册应用程序在node.js中的react和to_do_list中编写。

我想从localhost:3000 / login重定向到localhost:3001 / todolist(登录时,我想将用户重定向到使用其他端口的另一个页面)。

我的login.js文件如下所示:

import React, { Component } from 'react'
import { login } from './UserFunctions'
class Login extends Component {
constructor() {
    super()
    this.state = {
        email: '',
        password: '',
        errors: {}
    }

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

onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
}
onSubmit(e) {
    e.preventDefault()

    const user = {
        email: this.state.email,
        password: this.state.password
    }

    login(user).then(res => {
        if (res) {
            this.props.history.push(`/todolist`)
        }
    })
}

render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 mt-5 mx-auto">
                    <form noValidate onSubmit={this.onSubmit}>
                        <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
                        <div className="form-group">
                            <label htmlFor="email">Email address</label>
                            <input
                                type="email"
                                className="form-control"
                                name="email"
                                placeholder="Enter email"
                                value={this.state.email}
                                onChange={this.onChange}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <input
                                type="password"
                                className="form-control"
                                name="password"
                                placeholder="Password"
                                value={this.state.password}
                                onChange={this.onChange}
                            />
                        </div>
                        <button
                            type="submit"
                            className="btn btn-lg btn-primary btn-block"
                        >
                            Sign in
          </button>
                    </form>
                </div>
            </div>
        </div>
    )
}}export default Login

如何将用户从localhost:3000 / login重定向到localhost:3001 / todolist?

1 个答案:

答案 0 :(得分:1)

端口是定义原点的一部分,因此不能使用history.push进行更改。如果要更改此设置,实际上必须从中加载新页面。