how do i use react router in if/else condition in a function called by button click-CodePudding

const handleStartClick = () => {
    const email = localStorage.getItem('email')
    if (email !== null && email.length !== 0) {
      alert('not empty!')
    } else {
        <Routes>
          <Route path="/EmailInput" element={<EmailInput />}/>
        </Routes>
    }
  }

I want to use router in else condition to route to a different component. The function handleStartClick is called after button click.

CodePudding user response：

You can't.

If you want to trigger navigation from a callback:

Define your route with your other routes, giving it a path
Navigate to that path with the navigate function returned by the useNavigate hook

If you want to show a different component in a given context, without it being a whole new route, then set a state instead. Determine which component to show in the render function.

CodePudding user response：

This is how we use if-else in jsx

 return (<Routes>
  {(email !== null && email.length !== 0)&&alert("not empty!") ||  <Route path="/EmailInput" element={<EmailInput />}/> }

</Routes>)