重定向至"登录页(专用路由)不工作"诊断树|React Router|React js

Question

我是React js的新手。如果用户没有登录到登录页面，我想重定向用户。这是我的代码：

PrivateRoute.js文件

const PrivateRoute = ({ login, component: Component, ...rest }) => {
console.log(login);
return (
<React.Fragment>
<Route
{...rest}
render={(props) =>
!login ? <Redirect to="/signin" /> : <Component {...props} />
}
/>
</React.Fragment>
);
};

App.js文件

const [login, setlogin] = useState(false);
const isLoggedIn = (status) => {
setlogin(status);

};
return (
<Switch>
<PrivateRoute login={login} exact path="/">
<Home />
</PrivateRoute>

<Route path="/signin">
<Login isLoggedIn={isLoggedIn} token={(t) => setToken(t)}/>
</Route>

<PrivateRoute path="/categories">
<Categories />
</PrivateRoute>

</Switch
)

有人能找到问题吗？

Answer 1

试试这个：

const PrivateRoute = ({ login, component: Component, ...rest }) => {
return login ? (
<Route {...rest} render={props => <Component {...props} />} />
) : <Redirect to="/signin" />
}

Answer 2

是否出现任何错误，或者功能是否与预期不同？

这行得通吗？

建议2:

在App.js文件中

<PrivateRoute login={login} exact path="/" component ={Home}>

然后，

const PrivateRoute = ({ login, component: Component, ...rest }) => { 
console.log(login);
return !login ? <Redirect to="/signin" /> :<Route {...rest} component ={Component} /> 
};

建议3：

const PrivateRoute = ({ login, component: Component, ...rest }) => {
console.log(login);
return (!login ? <Redirect to="/signin" /> : 
<Route
{...rest}
render={(props) =>
<Component {...props} />
}
/>
);
};