refactor code with {Redirect} from react router v5 to react router v6

Question

I can't figure out how to change the code from react router v5: render () {

return (
  <div>
    <Header />
    <Switch>
      <Route exact path="/" component={<HomePage/>} /> 
      <Route path="/shop" component={<ShopPage/>} />
      <Route exact path="/signin" render={
        () => this.props.currentUser ? (
        <Redirect to="/" /> ) : (
        <SignInAndSignUp/>) 
       }>
      </Routes>

    </Switch>
  </div>
);

to: render () {

return (
  <div>
    <Header />
    <Routes>
      <Route exact path="/" element={<HomePage/>} /> 
      <Route path="/shop" element={<ShopPage/>} />
      <Route exact path="/signin" element={*element don't support render ....*}>
      </Route>

    </Routes>
  </div>
);

} }

Should I create a new function with the conditional for currentUser?

Answer 1

Best way to do it is to create a wrapper compoenent that checks for the current user and renders the children like mentioned below

function LoginRoutes(props) {
const { children, currentUser } = props;

if(currentUser) {
   return <Navigate to="/" />
}

return children;

}

And Use it in the routing layers as below

<Route
   path="/login"
   element={
     <LoginRoutes>
        <SignInAndSignUp />
     </LoginRoutes>
   }
 />

Or else you can simply put a check in the SignInAndSignUp component's initial render and redirect the user if he is logged in already

Example

function SignUp(props) {
  let navigate = useNavigate();

  useEffect(() => {
    if(props.currentUser) {
       navigate("/")
    }

  })
  
  return (<div>Signup here</div>)


}