How to use Link and Route inside of condition term

Question

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>
    )
}

Via this post https://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link works. — Oded, Dec 20 '20 at 17:50

KnowYourElements · Accepted Answer · 2020-12-20T17:42:41.183

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>
    )
}

Sadly not working, i tried this with return and without : if(validNum && validName){ props.addWorker(name,number,forklift) } — Oded, Dec 20 '20 at 17:26
You miss return. Redirect must be used with return e.g return . You may want to redirect after the props.addWorker — KnowYourElements, Dec 20 '20 at 17:27
still not working, can you add maybe code pen of your example your solution seems good but I don't know what it's not working for me. — Oded, Dec 20 '20 at 17:39
See updated comment. Hadn't seen the driverlicense function my bad. This should work now. — KnowYourElements, Dec 20 '20 at 17:42

score 0 · Answer 2 · answered Dec 20 '20 at 17:28

This should work:

export default function Signup(props) {
    const [redirect,setRedirect]=useState(false);
const[path,setPath]=useState("");
    if(condition)
    {
    setPath(set your path here)
    setRedirect(true);
    }



    return (
    {redirect?<Redirect to={path}/>:null}
        <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>
    )
}

mmmm...that's strange cause this is how i have been implementing it in my other react projects and works fine — Sakshi, Dec 20 '20 at 17:38
Can you check your code maybe you wrote something wrong? it's really saving me. thank you! — Oded, Dec 20 '20 at 17:41
Can you tell me one thing whatever page you want to go to after your condition validation,have you included the Component inside the React Router? like people normally do in a App.js file ? — Sakshi, Dec 20 '20 at 17:45

score 0 · Answer 3 · answered Dec 20 '20 at 17:28

0

The best way is to move pages without refreshing is by wrap your components with a higher-order component. Using HOC you can use context and change what you want to render. Refer documentation

answered Dec 20 '20 at 17:28

Dasun_96

173
1
7

How to use Link and Route inside of condition term

3 Answers3