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>}
/>