React 重新渲染手动路由仅在刷新一次后有效

Question

I'm trying to route a component so each time button will click, new content will show up.

I have come up with the next solution:

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 - handles the valid of the form, works fine, double checked it with debugging.

handleClick - check if the form is valid, if true execute routing, if not alert.

Each time inputValid returns true, my website path changes to localhost:3000/start , but only rerenders once I refreshing it.

How can I re-render an manual routing without refreshing the page?

Answer 1

Apparently this has been answered before but was not so easy to find.

useHistory must have the following trigger to re-render the component routing

history.go(0);

Once I've added this to my handleClick function it automatically re-rendered the page without refreshing it.