如何在 React useEffect 中更改路由器答案

【问题标题】：How to change router in React useEffect如何在 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 向上移动到父组件。
是的，这是我的问题，在我将路由器移动到父组件后，它就可以工作了！非常感谢你

标签： react-router react-hooks use-effect

【解决方案1】：

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

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

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

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

【讨论】：