Страница повторного рендеринга после входа в систему

Question

У меня есть компонент страницы входа, и я хочу изменить страницу после успешного входа.
My App.js Файл:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Dashboard from "./components/Dashboard";
import Login from "./components/Login";
import "antd/dist/antd.css";
import './App.css';

class App extends Component {
constructor(props){
    super(props);
    this.state = {loginStatus: "0"};
}
componentDidMount(){
    if(localStorage.getItem("user_id")){
        this.setState({ loginStatus: "1" });
    }
}
  render() {
    return (
        <Router>
             <div>
                <Route path="/" exact render={(props) => {
                    if(this.state.loginStatus === "1")
                        return <Dashboard />;
                    else
                        return <Login />;
                    }}
                />
            </div>
        </Router>
    );
 }
}

export default App;

И Мой Login.js:

import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom";
import { Input, Card, Icon, Button, Form, message } from 'antd';
const axios = require('axios');

class LoginPage extends Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
    if (!err) {
        axios.get('http://mybackendsite.com/api/login', {
            params: {
                mobile: "986541123331",
                password: "123456789"
            }
        })
        .then(function (response) {
            console.log(response.data);
            if(response.data.response === "wrong"){
                console.log("password is wrong");
            }else{
                console.log("password is true and logged in successfully");

                //SOME CODE TO RERENDER PAGE AND SHOW DASHBOARD
                reRenderApp(); //sample function
            }

        })
        .catch(function (error) {
            console.log("err is:" + error);
        })
    }
});
  }
  render() {
      //SOME ELEMENTS
 }

Мне нужна функция (например, reRenderApp ()) для повторного отображения страницы и отображения панели мониторинга для вошедшего в систему пользователя. Я могу использовать window.location.reload, но я не хочу этого делать. Я хочу изменить страницу без обновления. как я могу это сделать?

Answer 1

Один из способов сделать это - с помощью функции обратного вызова.

Вы можете передать реквизит из App.js в Login.js, а затем, как только API вернется.статус входа в систему вы можете вызвать эту функцию обратного вызова, в которой вы просто меняете состояние loginStatus.

Это несколько изменений, которые могут сделать работу за вас.

В App.js

return (
  <Login
    onSuccess={() => {
      this.setState({ loginStatus: true });
    }}
  />
);

In Login.js

//SOME CODE TO RERENDER PAGE AND SHOW DASHBOARD
this.props.onSuccess();

Это все, что вам нужно сделать, чтобы компонент страницы входа повторно отображался и отображал страницу панели мониторинга.

Надеюсь, что этот ответ решит вашу проблему.