How to use Link and Route inside of condition term

So I am trying to move through pages in react, my goal is when I did validate the things I need (name, and number) the page will switch and I will be in another route. (without refresh the page). I tried to do it with window.location but its refreshing the page

I cant use <Link> because I want to switch route only after the validation (inside IF condition) or I can and I don’t know-how. my code :

import React, {useState} from 'react'
import {Link} from 'react-router-dom';

export default function Signup(props) {
    
    const [name, setName] = useState(' ')
    const [number, setNumber] = useState(' ')
    const [forklift, setForklift] = useState(false)
    const [styleNumber,setStyleNumber]= useState({
        display:'none',
        
    })
    const [styleName,setStyleName]= useState({
        display:'none',
        
    })

    let validNum=false;
    let validName=false;

let driverLicense=()=>{
    if(forklift === 'true'){
        setForklift(true)
    }
    else{
        setForklift(false)
    }
    
    if(number.length<5 || number.length>5){
        setStyleNumber({
            display:'block',
            color:'red'
        })
    }
    else{
        validNum=true;
    }

    if(name.indexOf(' ')==-1|| name.length<4){
        setStyleName({
            display:'block',
            color:'red'
        })
    }
    else{
        validName=true;
    }
    
    if(validNum && validName){
        props.addWorker(name,number,forklift)
        let myBtn=document.getElementById('button').innerHTML=<Link to='/'></Link>
        console.log(myBtn)
    }
    else{
        alert('Error')
    }


    
}



    return (
        <div>
            <h2>Sign up</h2>
            <label>No.</label> 
            <input onChange={(e)=>{setNumber(e.target.value)}} type='number' maxLength='5'></input><br /> 
            <br /> <p style={styleNumber}> the number must be with 5 digits.</p>

            <label>Full Name:</label> <input onChange={(e)=>{setName(e.target.value)}} ></input><br /> <br />
            <p style={styleName} >the name must contain minimum 4 characters.</p>
            <label>Forkligt truck</label> <br /> <br />
    
            <input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift'  value="true"/>
            <label >Yes</label><br/>
            <input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift' checked  value="false"/>
            <label >no</label><br /> <br />
            <button id='button' onClick={driverLicense}>Create</button>

            
        </div>
    )
}

Answer

I think what you want to achieve is to Redirect the page when you meet a condition

in this case

import React, {useState} from 'react'
import {Redirect} from 'react-router-dom';

export default function Signup(props) {
    
    const [name, setName] = useState(' ')
    const [isVerified, setIsVerified = useState(false);
    const [number, setNumber] = useState(' ')
    const [forklift, setForklift] = useState(false)
    const [styleNumber,setStyleNumber]= useState({
        display:'none',
        
    })
    const [styleName,setStyleName]= useState({
        display:'none',
        
    })

    let validNum=false;
    let validName=false;

let driverLicense=()=>{
    if(forklift === 'true'){
        setForklift(true)
    }
    else{
        setForklift(false)
    }
    
    if(number.length<5 || number.length>5){
        setStyleNumber({
            display:'block',
            color:'red'
        })
    }
    else{
        validNum=true;
    }

    if(name.indexOf(' ')==-1|| name.length<4){
        setStyleName({
            display:'block',
            color:'red'
        })
    }
    else{
        validName=true;
    }
    
    if(validNum && validName){
        props.addWorker(name,number,forklift)
        setIsVerified(true);
    }
    else{
        alert('Error')
    }


    
}


    if (isVerified) {
      return <Redirect to="/" />
    }
    return (
        <div>
            <h2>Sign up</h2>
            <label>No.</label> 
            <input onChange={(e)=>{setNumber(e.target.value)}} type='number' maxLength='5'></input><br /> 
            <br /> <p style={styleNumber}> the number must be with 5 digits.</p>

            <label>Full Name:</label> <input onChange={(e)=>{setName(e.target.value)}} ></input><br /> <br />
            <p style={styleName} >the name must contain minimum 4 characters.</p>
            <label>Forkligt truck</label> <br /> <br />
    
            <input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift'  value="true"/>
            <label >Yes</label><br/>
            <input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift' checked  value="false"/>
            <label >no</label><br /> <br />
            <button id='button' onClick={driverLicense}>Create</button>

            
        </div>
    )
}