如何在 React useEffect 中更改路由器

Posted 2023-03-17

【中文标题】如何在 React useEffect 中更改路由器

【英文标题】：How to change router in React useEffect

【发布时间】：2021-09-19 09:26:58

【问题描述】：

我尝试将 react-router-dom 与 useEffect 结合使用，我尝试登录后更改路由器，这是我的代码

const Member = () => 
  let history = useHistory(); 

  useEffect(()=>
      if(!signInStatus.current)
          return 
      
      signIn(sign_data) //async fetch api
      .then(response=> 
        if(response.status!==200)
          setSigninError(response.message)
        else
          window.alert("Welcome")
          history.push('/signup') //just test 
          //change route
        
    )
    .then(data=>signInStatus.current = false)
  )'
  return (
    <BrowserRouter>
        <Switch>
            <Route path="/signup" render=()=>return(
            <div className="app"><Header /><SignUp add=setData submittingStatus=submittingStatus error=signupError/></div>)/>
            <Route exact path="/" render=()=>return(
            <div className="app"><Header /><SignIn sign=setSign signInStatus=signInStatus error=signInError/></div>)/>
        </Switch>
    </BrowserRouter>    

所以在我做了一些研究之后，我认为这不起作用是因为路由器还没有渲染，因为我在同一页面上写了路由器，所以我想知道是否有任何方法可以改变路由器使用后效果。 堆栈溢出的方法有千种，但它们都是不同的版本，即使是自制的钩子。所以我希望得到一个自定义的答案，非常感谢！

【问题讨论】：

根本问题是您试图在 BrowserRouter 之外访问 useHistory，这是您无法做到的。您需要将 BrowserRouter 向上移动到父组件。

是的，这是我的问题，在我将路由器移动到父组件后，它就可以工作了！非常感谢你

【参考方案1】：

我了解您希望根据用户是否登录进行重定向。

<Route exact path='/'>
          <Route
      render=() => 
        if (isAuthenticated) 
          return <HomePage />;
         else 
          return (
            <Redirect
              to=
                pathname: "/login",
              
            />
          );
        
      
    />
        </Route>

在 useEffect 中，您可以检查用户是否已登录。如果是，则将 isAuthenticated 的值设置为 true，将自动处理重定向。

通过这个示例，如果用户未登录并尝试访问主页，您可以将用户重定向到 /login。希望这是与您的查询类似的示例。如果有任何困惑，请询问。