在 React Router Dom v6 中重定向

Question

从 React Router Dom 更新到版本 6 后，我需要帮助。我有一个用于在用户登录后重定向的代码片段，它应该在版本 5 中工作，但我认为“重定向”已被弃用。 现在，我正在寻找一些集成到我以前的代码中的替代品。

这是我的代码示例，它应该在 React Router Dom 版本 5 中工作：

<Route path='/signin' render={() => this.props.currentUser? (<Redirect to =''/>): (<SignIn/>)}></Route>

我想我应该使用类似“Navigate”的东西，但我不确定如何使用条件语句来实现它，因为对于版本 6，我还必须添加“element={}”部分。

如果您需要更多信息，请告诉我。

谢谢！

Answer 1

处理“身份验证”或本质上是条件路由/重定向的新模式是使用包装器组件来处理条件逻辑并返回子节点或Navigate 。

const SignInWrapper = ({ children, currentUser }) => {
  return currentUser ? <Navigate to="/" replace /> : children;
};

...

<Route
  path='/signin'
  element={<SignInWrapper currentUser={this.props.currentUser}>
    <SignIn />
  </SignInWrapper>}
/>

Answer 2

我想将用户重定向到他被重定向的页面。 我如何在 V6 中使用此代码来做到这一点？

const PrivateRoute = ({ children, ...rest }) => { 


let {user} = useAuth();
  return (
   user.displayName ? (children):(<Navigate to='/login' />)
  )
}