React重新呈现手动路由只在刷新一次时有效

Question

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

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

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-检查表单是否有效，如果为true，则执行路由，如果不是alert。

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

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

Answer 1

显然，以前已经回答过这个问题，但不太容易找到。

useHistory必须具有以下触发器才能重新呈现组件路由

history.go(0);

一旦我把它添加到我的handleClick函数中，它就会自动重新呈现页面，而不会刷新它