在 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' />)
  )
}