如何使用react路由器dom 6.0.2 v进行检查

Question

我用这个代码来检查用户是否在react router dom 5.3.0v中登录，但这个代码在6.0.2v中不适用，相反呢？

<Route
exact
path="/"
render={() => {
return (
this.props.loading === true ?
<Redirect to="/login" /> :
<Redirect to="/home" /> 
)
}}
/>

Answer 1

将匿名组件抽象为实际的React组件并呈现为JSX。请记住，Navigate组件替换了Redirect，Route组件在element道具上呈现其组件。

const AuthRedirect = ({ loading }) => (
<Navigate to={loading ? "/login" : "/home"} replace />
);

<Route path="/" element={<AuthRedirect loading={this.props.loading} />} />