提交登录和注册按钮后如何重定向到React中的个人资料页面？

Question

这是我的登录页面代码，我想用它重定向到个人资料页面：

import React, { Component } from "react";


export default class Login extends Component {
   
    constructor(props){
        super(props)
        this.state = {
            username: '',
            password: '',
        }
    }
    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        const {username, password} = this.state;

        fetch('http://localhost:9000/users/login', {
            method: "POST",
            headers: {
            'Content-Type' : 'application/json'
        },
            body: JSON.stringify(this.state),
            
        })
        .then((result) => result.json())
        .then((info) => {console.log(info)})
        
    }

    render() {
        return (
        <div className="auth-wrapper">
          <div className="auth-inner">
             <form onSubmit={this.handleSubmit}>
                <h3>Sign In</h3>

                <div className="form-group">
                    <label>Username</label>
                    <input type="text" className="form-control" placeholder="Enter email" value={this.state.value} onChange={this.handleChange} name="username" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" name="password" className="form-control" value={this.state.value} onChange={this.handleChange} placeholder="Enter password" />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary btn-block">Submit</button>
                <p className="forgot-password text-right">
                    Forgot <a href="#">password?</a>
                </p>
            </form>
          </div>
        </div>
        );
    }
}

import React, { Component } from "react";
import { Redirect } from 'react-router';
import { withRouter } from 'react-router';

export default class SignUp extends Component {
    constructor(props){
        super(props)
        this.state = {
            firstName: '',
            password: '',
            username: '',
            lastName: '',
            email: '',
            isAdmin: 'false',
        }
    }
    onChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
        console.log(this.state.email)
        console.log(this.state.isAdmin)
      }

    onSubmit = async (e) => {
        e.preventDefault();
        await this.state.isAdmin == "on" ? this.setState({isAdmin: true}) : this.setState({isAdmin: false})
       // const {firstName, lastName, email,} = this.state;

        fetch('http://localhost:9000/users/new', {
        method: "POST",
        headers: {
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify(this.state)
    })
    
    .then((info) => {console.log(info)})
    this.props.history.push('/profile');    
}

    

    render() {
        return (
        <div className="auth-wrapper">
          <div className="auth-inner">
            <form method='POST' action='http://localhost:9000/users/new'>
                <h3>Sign Up</h3>

                <div className="form-group">
                    <label>First name</label>
                    <input type="text" className="form-control" placeholder="First name" name ="firstName"/>
                </div>

                <div className="form-group">
                    <label>Last name</label>
                    <input type="text" className="form-control" placeholder="Last name" name="lastName" />
                </div>

                <div className="form-group">
                    <label>Username</label>
                    <input type="text" className="form-control" placeholder="Username" name="username" />
                </div>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" className="form-control" placeholder="Enter email" name="email" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" name="password" />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" onClick={console.log(this.state.value)} name="isAdmin" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Signup as Reviewer</label>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary btn-block">Sign Up</button>
                
                <p className="forgot-password text-right">
                    Already registered <a href="#">sign in?</a>
                </p>
            </form>
          </div>
        </div>
        );
    }
}

当我点击我的个人资料页面时，我想重定向到/profile。目前它挂起并成功登录用户。我现在必须手动转到 /profile 才能到达该页面 我正在使用 Express 作为我的后端仅供参考

编辑：我添加了我的注册页面代码，因为它也不起作用，并且不确定为什么。就像登录页面一样它挂了

Answer 1

试试这个

 fetch('http://localhost:9000/users/login', {
        method: "POST",
        headers: {
        'Content-Type' : 'application/json'
    },
        body: JSON.stringify(this.state),
        
    })
    .then((result) => {
     result.json();
     this.props.history.push("/Profile");})
    .then((info) => {console.log(info)})