React-router history.pu sh () успешно изменила URL-адрес, но не выполнила повторную визуализацию содержимого JXS в нужное содержимое маршрута с соответствующим путем - PullRequest
Новая
       31

React-router history.pu sh () успешно изменила URL-адрес, но не выполнила повторную визуализацию содержимого JXS в нужное содержимое маршрута с соответствующим путем

0 голосов
/ 21 февраля 2020
  1. Я использовал для изменения страницы путем рендеринга целого компонента страницы, чтобы использовать setState "currentPage: 'xxx'" с регистром переключателя внутри render, чтобы соответствовать нужному параметру, чтобы он мог отображать 'xxx' ' s content.

И эти два дня я пытался использовать React-router для замены этого старого способа, и это произошло в ситуации, сложившейся между страницей входа в систему и страницей панели мониторинга.

I раньше помещал API функции вызова, чтобы получить результат, который решает, следует ли повторно выполнить рендеринг на dashboard-page

Но теперь, если я использую функцию повторного рендеринга, которая должна отображаться, она не может пройти через функцию отправки (по крайней мере, я не знаю, как использовать

, поэтому я поместил history.pu sh () в результат API функции отправки, чтобы при условии, что состояние результата равно "true", history.pu sh () будет выполнено.

Но проблема произошла здесь, то есть history.pu sh выполняется полностью, и URL по праву изменился на localhost: 3000 / dashboard, но моя страница не изменилась вообще ,

У меня второй вопрос: в чем преимущество использования React-router по сравнению с моим старым способом swich-case-render?

Кстати, я использую Create-реагировать- приложение

вот мой код 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import axios from 'axios';
import './dist/css/adminlte.min.css';
import './plugins/fontawesome-free/css/all.min.css';
import './plugins/icheck-bootstrap/icheck-bootstrap.min.css';
import  { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Login from "./Login";
import Board from "./Board";
import { createBrowserHistory } from 'history';

class Ares extends React.Component {
    constructor(props) {
        super(props);
        console.log("reconstructor");
        this.state={
            currentPage:"login",
            currentMainContent:"empty",
            currentNav:"Classic",
            account:'moore_huang@you-ce.net',
            email:'',
            password:'abc123'	,
            sid:'',
            startAt:new Date('1970-01-01 12:00:00'),
            endAt:new Date(),
            access_token:'',
            memberPage:1,
            memberData:[],
            nowPick:'',
        };
    }
    handleChange(event){//每一鍵輸入後觸發 檢查輸入字元
        const target=event.target;
        this.setState({
            [target.name]: target.value
        });
    }
    submitLogin(event){
        event.preventDefault();
        //------------------------------------------------------
        axios.post('/api/login',
            {
                email:this.state.account,
                password:this.state.password
            },
            {
                baseURL:'http://www.localhost.ares.net'
            })
            .then((result) => this.getSidFunc(result.data))
            .catch((error) => { console.error(error) })
    }
    submitLogin2(event){
        event.preventDefault();
        this.setState({
            sid:'Im in',
            currentPage:'home',
        });
    }
    getSidFunc(response){
        if(response.status===1){
            console.log("login success");
            let history=createBrowserHistory();
            // let history = this.props.history;
            history.push("/dashboard",true);
            // this.state.history.push("/dashboard");
            console.log(history);
            // window.location.href=window.location.origin+"/dashboard";
            this.setState({
                sid:'Im in',
                currentPage:'home',
                access_token:response.result.access_token
            });
            console.log("----------------------------");

        }else{
            console.log("login fail");
            alert("wrong account or password");
        }
    }
    postRequest(url, payload, onLoadFunc, onErrorFunc, bRetry){
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url);
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onload = function(event)
        {
            var jsonData = null;
            try
            {
                jsonData = JSON.parse(xhr.responseText);
                if (onLoadFunc)
                    onLoadFunc(jsonData);
            }
            catch(e)
            {
                console.log(e);
                console.log("xhr json error    bRetry: " + bRetry + "    data: \n" + xhr.responseText);
                if (bRetry)
                {
                    setTimeout(function()
                    {
                        this.postRequest(url, payload, onLoadFunc, onErrorFunc, bRetry);
                    }, 3000);
                }
            }
        };
        xhr.onerror = function(event)
        {
            console.log("xhr onerror    bRetry: " + bRetry);
            if (onErrorFunc)
                onErrorFunc(event);
            if (bRetry)
            {
                setTimeout(function()
                {
                    this.postRequest(url, payload, onLoadFunc, onErrorFunc, bRetry);
                }, 3000);
            }
        };

        xhr.send(JSON.stringify(payload));
    }


    render() {
        console.log("////////////");
        console.log(this.state);
        return (
            <Router>
                <Switch>
                    <Route exact={true} path="/">
                        <Login
                            submitLogin={(event) => this.submitLogin(event)}
                            submitLogin2={(event) => this.submitLogin2(event)}
                            handleChange={(event) => this.handleChange(event)}
                            account={this.state.account}
                            password={this.state.password}
                        />
                    </Route>
                    <Route exact={true} path="/dashboard">
                        <Board

                        />
                    </Route>
                </Switch>
            </Router>
        );
    }
}
// ========================================

ReactDOM.render(
    <Ares />,
    document.getElementById('root')
);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

и вот логин. js

import React from 'react';
import ReactDOM from 'react-dom';
import  { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function Login(props) {
    console.log("renderLogin");
    return (
        <div className="hold-transition login-page">
            <div className="login-box">
                <div className="login-logo">
                </div>
                <div className="card">
                    <div className="card-body login-card-body">
                        <p className="login-box-msg">Sign in to start your session</p>
                        <form onSubmit={props.submitLogin}>
                            <div className="input-group mb-3">
                                <input
                                    type="email"
                                    className="form-control"
                                    placeholder="Email"
                                    onChange={props.handleChange}
                                    name={"account"}
                                    value={props.account}
                                />
                                <div className="input-group-append">
                                    <div className="input-group-text">
                                        <span className="fas fa-envelope"></span>
                                    </div>
                                </div>
                            </div>
                            <div className="input-group mb-3">
                                <input
                                    type="password"
                                    className="form-control"
                                    placeholder="Password"
                                    onChange={props.handleChange}
                                    name={"password"}
                                    value={props.password}
                                />
                                <div className="input-group-append">
                                    <div className="input-group-text">
                                        <span className="fas fa-lock"></span>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-8">
                                    <div className="icheck-primary">
                                        <input type="checkbox" id="remember"/>
                                        <label htmlFor="remember">
                                            Remember Me
                                        </label>
                                    </div>
                                </div>
                                <div className="col-4">
                                    {/*<Link to='/dashboard'>*/}
                                        <button className="btn btn-primary btn-block">Sign In</button>
                                    {/*</Link>*/}
                                </div>
                            </div>
                        </form>

                        <div className="social-auth-links text-center mb-3">
                            <p>- OR -</p>
                            <a onClick={props.submitLogin2}>
                                <i  className="fab fa-facebook mr-2"></i> Sign in using Facebook
                            </a>
                            <a href="#" className="btn btn-block btn-danger">
                                <i className="fab fa-google-plus mr-2"></i> Sign in using Google+
                            </a>
                        </div>

                        <p className="mb-1">
                            <a href="forgot-password.html">I forgot my password</a>
                        </p>
                        <p className="mb-0">
                            <a href="register.html" className="text-center">Register a new membership</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Login;

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

Сначала вы должны определить свои маршруты в App.js следующим образом: 

import React, { Component } from 'react';
import './App.css';
import {BrowserRouter, Route, Redirect, Switch, withRouter,browserHistory} from 'react-router-dom';
import {Router} from 'react-router';
import Login from './Login';
import DashBoard from './DashBoard';

class App extends Component {
  render() {
    return (

<div className="App">
<Switch>
    <Route exact path='/' component={Login} />
    <Route exact path='/DashBoard' component={DashBoard} />
  </Switch>
      </div>
   );
  }
}

export default withRouter(App);

Затем в своем логине. js, import { useHistory } from 'react-router-dom';

внутри Логин функция, const history = useHistory();

и после вашего результата отправки API history.push('/DashBoard')

Теперь ваш второй вопрос в чем преимущество использование React-router по сравнению с моим старым способом swich-case-render?

React-маршрутизатор поддерживает стек вашей истории, что облегчает навигацию по вашему приложению, не беспокоясь о том, какие маршруты пользователь выбрал. В одностраничных приложениях есть только одна страница html. Мы повторно используем одну и ту же страницу html для визуализации различных компонентов на основе навигации. Для получения более подробной информации о реагирующем маршрутизаторе, я бы предложил вам пройти через Начало работы с React Router

Надеюсь, это поможет !!

0 голосов
/ 21 февраля 2020

пожалуйста, объявите объект истории вне класса. например 

const history = createBrowserHistory();

и затем, пожалуйста, измените эти строки 

let history=createBrowserHistory();
history.push("/dashboard",true);

history.push("/dashboard")

Наконец, 

render() {
    console.log("////////////");
    console.log(this.state);
    return (
        <Router history={history}>
            <Switch>

Кроме того, я рекомендую вам использовать Link вместо тег

...