我如何在按钮单击调用的函数中在 if/else 条件下使用反应路由器

【问题标题】：how do i use react router in if/else condition in a function called by button click我如何在按钮单击调用的函数中在 if/else 条件下使用反应路由器
【发布时间】：2022-07-01 21:08:47
【问题描述】：

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

我想在 else 条件下使用路由器来路由到不同的组件。按钮点击后调用函数（handleStartClick）。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你不能。

如果你想从回调中触发导航：

用你的其他路线定义你的路线，给它一个路径
使用useNavigate hook 返回的navigate 函数导航到该路径

如果你想在给定的上下文中显示不同的组件，而不是一个全新的路由，那么设置一个状态来代替。确定要在渲染函数中显示的组件。

【讨论】：