如何用React.js从一个组件重定向回App？

Question

我是React.js的新学员，我没有找到正确的解决方案，我有CreateUser组件，当一个客户端成功创建一个我想把客户端重定向到App......我需要在CreateUser组件的这个功能中发生。

private handleSubmit(e:any){

        e.preventDefault();
        this.setState({
            username: this.state.username,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword,
            userEmail: this.state.userEmail
        })
        this.passConfrim();
        if (this.isAlertVisible){
            console.log(this.state)
            this.myUserDateService.create(this.state);
---->                               ** Right Here i need to redirect!  **       <----
        }
    }

在函数结尾的if语句处。

App.CreateUser组件

import './App.css';
import { LoginComponent } from './components/LoginComponent';
import CreateUser from './components/CreateUser';
import "bootstrap/dist/css/bootstrap.min.css";
import { Router, Switch, Route, Link, useHistory as history} from "react-router-dom";

function App() {

  return (
    <Router history={history()} >  
                <nav className="navbar navbar-expand navbar-dark bg-dark">
            <a href="/Home" className="navbar-brand">
              To Do List
            </a>
            <div className="navbar-nav mr-auto">
              <li className="nav-item">
                <Link to={"/Login"} className="nav-link">
                Login
                </Link>
              </li>
              <li className="nav-item">
                <Link to={"/CreateUser"} className="nav-link">
                Create User
                </Link>
              </li>
            </div>
          </nav>
            <div id="App-content">
            <Switch >
                <Route exact path={["/", "/Home"]} /> 
                <Route path="/Login" exact component={LoginComponent} />
                <Route path="/CreateUser" exact component={CreateUser} />


            </Switch>
            </div>
    </Router>
  );

}

export default App;

CreateUser组件。

import React, { Component } from 'react';
import { UserDataService } from '../services/UserData.service';

interface IState {
    username:string;
    userEmail:string;
    password:string;
    confirmPassword:string;
}

export class CreateUser extends Component <{}, IState> { 

    isAlertVisible: boolean = true;
    myUserDateService = new UserDataService();

    constructor(props: {}, myUserDateService:UserDataService){
        super(props );
        this.state = {
            username:"",
            password:"",
            confirmPassword:"",
            userEmail:"",
        }
    }

    private handleSubmit(e:any){

        e.preventDefault();
        this.setState({
            username: this.state.username,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword,
            userEmail: this.state.userEmail
        })
        this.passConfrim();
        if (this.isAlertVisible){
            console.log(this.state)
            this.myUserDateService.create(this.state);
        }
    }

    passConfrim(){
        if(this.state.password !== this.state.confirmPassword){
            this.isAlertVisible = false;
        }else{
            this.isAlertVisible = true;
        } 
    } 

    render() {

        return (
            <div className="form-group">
                <h1>Create User</h1>
                <form onSubmit={e => this.handleSubmit(e)}>
                    <label >Username</label>
                    <input className="form-control" type="text" placeholder='Enter Username...' onChange={e => this.setState({username : e.target.value})} required/>
                    <br/>
                    <label >Email</label>
                    <input className="form-control" type="text" placeholder='Enter your email...' onChange={e => this.setState({userEmail : e.target.value})} required/>
                    <br/>
                    <label >Passowrd</label>
                    <input className="form-control" type="password" placeholder='Enter Password...' onChange={e => this.setState({password : e.target.value})} required/>
                    <br/>
                    <label >Confirm Passowrd</label>
                    <input className="form-control" type="password" placeholder='Confirm Password...' onChange={e => this.setState({confirmPassword : e.target.value })} required />
                    <div style={{color: "red", textAlign: "left"}} hidden={this.isAlertVisible}>**password not match</div>
                    <br/>
                    <button className="btn btn-primary" type="submit" >Create User</button>
                </form >
            </div>

        )
    }
}

export default CreateUser;

Answer 1

你可以使用 history.push('/yourRoute') 而这将会把你带到你心仪的任何路线上。

Answer 2

由于你是从react扩展而来的用户组件，所以它是一个类组件，你不能在里面使用'useHistory'钩子。

另外，你把历史记录作为一个道具传递给路由器，你可以试试下面的代码来导航，然后告诉我。

this.props.history.push('/yourroute');

Answer 3

基本上你不需要把历史记录传给Router，你可以从react-router.Import withRouter在createUser组件里面使用withRouter高阶组件--。https:/reacttraining.comreact-routercoreapiwithRouter。

import { withRouter } from "react-router";

然后，我们只需要导出CreateUser组件，比如----------。

export default withRouter(CreateUser);

现在你可以访问所有与CreateUser组件内的路由相关的道具，现在你可以使用--。

this.props.history.push('/your-route');

要检查你的withRouter还有哪些属性，你可以在CreateUser组件中控制台.记录this.props.history。

提示 - 你不能在类组件中使用钩子，所以你不能在CreateUser组件中使用History，而应该使用withRouter。