Достигните перенаправления маршрутизатора при успешном входе в систему - PullRequest
Новая
       10

Достигните перенаправления маршрутизатора при успешном входе в систему

1 голос
/ 14 апреля 2020

Я хочу выполнить sh вход в систему с использованием реакции и достичь маршрутизатора .. По сути, я хочу go из компонента входа в компонент HomeLayout при успешной аутентификации. Я успешно выполнил вход в систему

Вот код моего компонента приложения, который является точкой входа в проект 

import React, { Component } from 'react';

function App() {
    return (
      <div>
        <Login />
      </div>
    );
  }

===============

Компонент входа 

  import React, { Component } from "react";
import axios from "axios"

class Login extends Component {
    state = {
      username: "",
      password: "",
      loggedIn: false
    }

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

     LoginUser = (e)=>{
      const {username, password} = this.state
       e.preventDefault()
      let UserLoginDetails = {
        email: username,
        password: password
      }

       axios.post("localhost:4500/users/login", UserLoginDetails)
       .then(loginResultFromBackend=>{
          this.setState({loggedIn: true})
              // I want to go to "/Home" here
       }).catch(error=>{
         console.log(error)
       })
     }

    render() {
      return (
        <form onSubmit={this.LoginUser}>
        <input
            type="text"
            value={this.state.username}
            name="username"
            onChange={this.onChange}/>

        <input
            type="text"
            value={this.state.username}
            name="username"
            onChange={this.onChange}/>

        <button type="submit">Submit</button>
    </form>
      );
    }
  }

==========================

Домашний компонент 

import category from "./category";
import { Router, Link } from "@reach/router";
import NotFound404 from "../default404/PageNotFound";


 class HomeLayout extends Component {
   render() {
     return (
       <div>
           <Link to={`Home`} > Home </Link>
           <Link to={`category`}  Categories </Link>


         <Router>
           <Home path="/Home"></Home>
           <category path={`category/:category`}></category>
           <NotFound404 default />
         </Router>
       </div>
     );
   }
 }

В штате я установил username = "", password = "" и loggedIn = false.

Ожидаемое поведение

Получив результат от бэкэнда, я хочу перейти на домашнюю страницу, расположенную в / Home.

Я пытался сделать navigate("/Home"), но это просто меняет URL, без изменения компонента.

Помоги мне здесь? Если бы кто-то со стороны реакции-роутера пролил некоторый свет, это было бы полезно, поскольку я по сути код newb ie.

Ответы [ 3 ]

1 голос
/ 14 апреля 2020 
import { Redirect } froom "react-router-dom";



render() {
  if (this.state.loggedIn) return <Redirect to="/Home" />;
  return (
    <form onSubmit={this.LoginUser}>
    <input
        type="text"
        value={this.state.username}
        name="username"
        onChange={this.onChange}/>

    <input
        type="text"
        value={this.state.username}
        name="username"
        onChange={this.onChange}/>

    <button type="submit">Submit</button>
</form>
  );
}
0 голосов
/ 14 апреля 2020

Вы можете использовать this.props.history.push("/Home"); напрямую, если компонент " Логин " используется как 

<Switch>
    <Route path="/Login" component={Login} />
    <Route path="/Home" component={Home} />
</Switch>

Следовательно, вы можете написать его как 

axios.post("localhost:4500/users/login", UserLoginDetails)
.then(loginResultFromBackend=>{
    this.setState({loggedIn: true})
    this.props.history.push("/Home");
}).catch(error=>{
    console.log(error)
})

Кроме того, вы можете попробовать использовать useHistory, как указано в LINK

0 голосов
/ 14 апреля 2020

Импортируйте компонент Redirect из react-router-dom и используйте его для перенаправления на домашнюю страницу, если this.state.loggedIn - true. Вы можете использовать это как на react-router-dom, так и на маршрутизаторе Reach.

...