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?
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.