Question

成功登录后，我想将用户重定向到“仪表板/主页”网址。登录后发生两件事：

用户通过身份验证后，顶级“App.tsx”文件将呈现 AuthenticatedApp 组件。这是我的 App.tsx 文件：

NavigationLink(destination: destination, tag: tag, selection: selection) { EmptyView() }
    .id(UUID())

“登录”组件将“/dashboard/home”推送到历史记录中。

登录.tsx

function App() {
 const { user } = useAuth()

 return (
 !user.token ?
   <div className="wrapper">
     <h1>Income/Expenses Tracker</h1>
     {flash && 
     <div>
       {flash}
     </div>}
     <BrowserRouter>
       <Switch>
         <Route exact path={'/'}>
           <Redirect to='/login' />
         </Route>
         <Route path='/register'>
           <Register setFlash={setFlash}/>
         </Route>
         <Route path='/login'>
           <Login />
         </Route>
       </Switch>
     </BrowserRouter>
   </div>
 : 
   <AuthenticatedApp />     
 )
}

AuthenticatedApp.tsx

export const Login = (props: any) => {
  const { setUser, loginUser } = useAuth()
  const [email, setEmail] = useState<string>();
  const [password, setPassword] = useState<string>();
  const [errors, setErrors] = useState<boolean>()
  const history = useHistory()

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    loginUser({
      email,
      password
    }).then((result: any) => {
      console.log(result)
      if (result.message === 'login error') {
        setErrors(true)
      } else {
        history.push('/dashboard/home')
      }
    })
  }

但“仪表板/主页”组件永远不会呈现。通过放入 console.log 我可以看到它点击了这条路线，但它永远不会在登录时将组件呈现在里面。如果我刷新页面，它会。知道我在这里做错了什么吗？

我使用的是 React-Router v5。

登录后反应路由器重定向

0 个答案: