React re-rending 手动路由仅在刷新一次时有效答案

【问题标题】：React re-rending manual routing works only once refreshingReact re-rending 手动路由仅在刷新一次时有效
【发布时间】：2020-12-23 18:20:24
【问题描述】：

我正在尝试路由一个组件，以便每次单击按钮时都会显示新内容。

我想出了下一个解决方案：

import React, {useState} from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useHistory
  } from "react-router-dom";
import Starter from '../../images/calculator.svg';
import Container from 'react-bootstrap/container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import $ from 'jquery';

function Calculator() {
    const [inputName, setInputName] = useState('');
    const [inputPhone, setInputPhone] = useState('');
    const [inputValid, setInputValid] = useState(false);
    const history = useHistory();

    //Check if filled the inputs in valid way
    const handleValidation = () =>{
        let errors = {};
        let formIsValid = true;
    
        //Name
        if(typeof inputName !== "undefined"){
           if(!inputName.match(/^[a-zA-Z]+$/)){
              formIsValid = false;
              errors["name"] = "רק אותיות בשם, ללא מספרים או סימנים";
           }        
        }
        if(inputName === ""){
            formIsValid = false;
            errors["name"] = "שם מלא חסר";
         }
         if(typeof errors['name'] === 'undefined'){
            errors['name'] = "";
        }



    
        //Phone number
        if(inputPhone.length !== 9){
            formIsValid = false;
            errors["phone"] = "המספר אינו תקין";
        }
        if(typeof inputPhone !== "undefined"){
            if(!inputPhone.match(/^\d+$/)){
               formIsValid = false;
               errors["phone"] = "רק מספרים בטלפון, ללא אותיות";
            }        
         }
         if(inputPhone === ''){
            formIsValid = false;
            errors["phone"] = "מספר פלאפון חסר";
         }
         if(typeof errors['phone'] === 'undefined'){
             errors['phone'] = "";
         }

        $('.errors').html(errors["name"] + " <br /> " + errors["phone"]);
        setInputValid(formIsValid);
        return formIsValid;
    }





    //Handles the click
    //if valid continue
    //if not alert error
    const handleClick = () =>{
        if(inputValid){
            history.push("/start");
        }
        else{
            alert('נא למלא את תיבות הטקסט כנדרש');
        }
    }

    return (
        <section id="calculator">
            <h1>
                מחשבון הצעת מחיר
            </h1>
            <br/>
            <Container>
                <Router>
                    <Switch>
                        <Route exact path="/">
                            <div className="center">
                                <img src={Starter} style={{width: '500px'}} alt="מחשבון הצעת מחיר"/>
                                <br/>
                                <input onChange={handleValidation} type="text" id="name" placeholder="שם מלא" value={inputName} onInput={e => setInputName(e.target.value)} />
                                <br/>
                                <br/>
                                <input onChange={handleValidation} type="text" id="phone" placeholder="מספר טלפון" value={inputPhone} onInput={e => setInputPhone(e.target.value)}/>
                                <br/>
                                <p className="errors"></p>
                                <br/>
                                    <button id="btn" onClick={handleClick}>התחל</button>
                                <br/><br/><br/>
                                    אפשר גם לקבל הצעה בוואצאפ!
                            </div>
                        </Route>
                        <Route path="/start">
                            test
                        </Route>
                    </Switch>
                </Router>
            </Container>
        </section>
    );

}

export default Calculator;

handleValidation - 处理表单的有效性，工作正常，通过调试仔细检查。

handleClick - 检查表单是否有效，如果为真则执行路由，如果不是警报。

每次inputValid 返回 true，我的网站路径都会更改为 localhost:3000/start，但只有在我刷新后才会重新呈现。

如何在不刷新页面的情况下重新呈现手动路由？

【问题讨论】：

请发布您的整个组件。你的代码的点点滴滴看起来真的很混乱。
试试把它们改成英文？
@PrateekThapa 把什么改成英文？如果用户以错误的方式填写输入，我写的文本只是 cmets，不会影响我的路由问题。
您确实意识到您的输入字段对于不懂您的语言的人来说是不可读的。
@PrateekThapa 你在这里错过了重点，但无论如何我已经发布了一些经过挖掘后对我有用的答案

标签： javascript reactjs jsx

【解决方案1】：

显然这是answered before，但不是那么容易找到。

useHistory 必须有以下触发器才能重新渲染组件路由

history.go(0);

将其添加到我的handleClick 函数后，它会自动重新呈现页面而不刷新它。

【讨论】：