使用｛Redirect｝将代码从react路由器v5重构为react路由器v6

Question

我不知道如何更改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>
);

收件人：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>
);

}}

我应该为currentUser创建一个带有条件的新函数吗？

Answer 1

最好的方法是创建一个包装组件，检查当前用户并呈现下面提到的子级

function LoginRoutes(props) {
const { children, currentUser } = props;
if(currentUser) {
return <Navigate to="/" />
}
return children;
}

并在下面的路由层中使用它

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

或者，您可以简单地在SignInAndSignUp组件的初始呈现中进行检查，并在用户已经登录的情况下重定向用户

示例

function SignUp(props) {
let navigate = useNavigate();
useEffect(() => {
if(props.currentUser) {
navigate("/")
}
})

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

}