Redirect с Реакт Роутер

Я осуществляю login посредством API REST с php, jwt и react для frontend, проблема состоит, в том, что сделав login, я хочу послать в следующую страницу используя <Redirect to='/path'> но я не добиваюсь того, чтобы оно функционировало, это мой компонент для login

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


import "../../css/pages/pages.css";
import "../../css/pages/login-register-lock.css";

import FormLogin from "./FormLogin";
import Error from "../Error";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login: false,
      error: false,
      type_error: ""
    };
  }

  componentDidMount() {
    if (localStorage.getItem("token") !== null) {
      this.setState({
        login: true
      });
      // const token = JSON.parse(localStorage.getItem("token"));
      // this.get_perfil_info(token.data);
    }
  }

  login = user_info => {
    // si se envio el formulario no vacio
    if (user_info.username !== "" && user_info.password !== "") {
      this.setState({
        error: false,
        type_error: ""
      });

      if (this.state.login) {
        // redirect
      }

    } else {
      this.setState({
        error: true,
        login: false,
        type_error: "empty"
      });
    }
  };

  api_login = login_info => {
    const form_data = new FormData();

    form_data.append("email", login_info.username);
    form_data.append("password", login_info.password);

    axios
      .post("http://api.local.labtak:88/sysuser/login", form_data)
      .then(response => {
        localStorage.setItem("token", JSON.stringify(response));
        this.setState({
          login: true
        });

      })
      .catch(error => {
        this.setState({
          error: true,
          login: false,
          type_error: "login"
        });
      });
  };

  render() {
    const error = this.state.error;
    const type_error = this.state.type_error;
    let resultado;
    if (error) {
      switch (type_error) {
        case "login":
          resultado = <Error mensaje="Usuario o contraseña erroneos" />;
          break;
        case "empty":
          resultado = <Error mensaje="Ambos campos son requeridos" />;
          break;
        default:
          break;
      }
    }

    return (
      <section id="wrapper">
        <div className="login-register">
          <div className="login-box card">
            <div className="card-body">
              {resultado}
              <FormLogin login={this.login} />
            </div>
          </div>
        </div>
      </section>
    );
  }
}

export default Login;

И это маршруты, которые я использую

//Dependencias
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

// componentes
import Login from './Login/Login'
import UpdateUser from './Update/UpdateUser'
class AppRouter extends Component {

    constructor (props) {
        super (props)
        this.state = {
            is_logged: false
        }
    }    

    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" render= { () => (
                        <Login/> 
                    )}/>
                    <Route path="/update" render={ () => (
                        <UpdateUser/>
                    ) } />
                </Switch>
            </Router>
        );
    }
}

export default AppRouter;

Внутри компонента App у меня есть только это:

import React, { Component } from 'react';

import AppRouter from './Router'

class App extends Component {

  render() {

    return (
        <AppRouter />
    )
  }
}

export default App;
0
задан 03.04.2019, 02:50
1 ответ

Чтобы делать что-то mГЎs масштабируемый ты recomeindo делать это:

function PrivateRoute({ children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        fakeAuth.isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

И потом ты это используешь asГ-:

<PrivateRoute path="/protected">
  <ProtectedPage />
</PrivateRoute>

полный Пример acГЎ в ней pГЎgina чиновник react router:

https://reacttraining.com/react-router/web/example/auth-workflow

0
ответ дан 02.12.2019, 04:34