как перенаправить обратно в приложение с помощью React. js из компонента?

Question

Я новичок в React. js и не нахожу правильного решения. У меня есть компонент CreateUser, и когда клиент успешно создает его, я хочу перенаправить клиента в приложение ... мне нужно, чтобы это произошло в этой функции CreateUser Component

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

Приложение:

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

Поскольку вы расширяете пользовательский компонент из реакции, это компонент класса, и вы не можете использовать внутри него хуки useHistory.

Также вы передаете историю в качестве опоры в маршрутизатор, можете ли вы попробовать приведенный ниже код для навигации и дайте мне знать.

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

Answer 2

В основном вам не нужно передавать историю с маршрутизатором, вместо этого вы можете использовать компонент высокого порядка withRouter из реактивного маршрутизатора. Импорт withRouter внутри компонента createUser - https://reacttraining.com/react-router/core/api/withRouter

import { withRouter } from "react-router";

Затем нам просто нужно экспортировать компонент CreateUser, например -

export default withRouter(CreateUser);

Теперь у вас есть доступ ко всем реквизитам связанных с маршрутизацией внутри компонента CreateUser, теперь вы можете использовать -

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

Чтобы проверить, какие еще свойства у вас есть с withRouter, вы можете просто console.log this.props.history внутри компонента CreateUser.

Совет. Вы не можете использовать ловушки внутри компонентов класса, поэтому вы не можете использовать useHistory внутри компонента CreateUser вместо использования withRouter.

Answer 3

вы можете использовать history.push('/yourRoute'), и это приведет вас к любому маршруту, по вашему желанию