我有一个听起来很简单的问题，但我就是找不到解决方案。我已经针对标准 JS 和专门针对 React 的类似问题尝试了多个答案，但我似乎找不到有效的方法。
当我的用户在未登录的情况下导航到网站时，我想将他们重定向到我的登录屏幕。对此有何工作声明？提前致谢。
【问题讨论】：
标签： javascript reactjs redirect
如果您使用React Router: Declarative Routing for React.js 之类的东西，这是进行重定向的正确方法，您可以通过两种方式使用Redirect API：
<Redirect to="" />
withRouter()
要使用<Redirect to="" />，您只需在条件或组件内部使用：
<Redirect to="/somewhere/else" />
{/* Or in your case... */}
<Route exact path="/">
{loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>
使用withRouter()：
import React from "react";
import { withRouter } from "react-router";
// A simple component that shows the pathname of the current location
class App extends React.Component {
componentDidMount() {
// Check user logged in and redirect somewhere.
if (loggedIn) {
// Something like this.
location.replace("/dashboard");
}
}
render() {
const { match, location, history } = this.props;
return <div>You are now at {location.pathname}</div>;
}
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const App = withRouter(App);
【讨论】：
location.push 不是重定向，它应该是location.replace。另外，render 生命周期函数是一个纯函数，所以不应该有命令式导航的副作用，这应该在 componentDidUpdate 生命周期方法中完成。
componentDidMount生命周期方法
您的应用程序的每条路由都必须包装在一个 HOC 中，该 HOC 将检查用户是否在 componentDidMount 中进行了身份验证。
如果未通过身份验证，您将重定向到登录屏幕。
如果您的应用支持令牌进行身份验证：
在 HOC 的componentDidMount 中，您可以检查缓存在某些浏览器存储中的令牌是否仍然有效，并根据有效性决定重定向到登录屏幕
我更喜欢什么：
我发现，使用 Redirect 或 react-router-dom 更具声明性。在这里查看用法：https://reactrouter.com/web/api/Redirect
【讨论】：
<Redirect /> 就是你的答案
只需添加此代码
window.location.replace('new url')
每当执行此行时，窗口将被替换为新定义的 URL！ :D
【讨论】：
import { useAuthState } from 'react-firebase-hooks/auth';
firebase.initializeApp({
//your key from firebase
})
const [user] = useAuthState(auth);
<section>
{user ? <ChatRoom /> : <SignIn />}
</section>
【讨论】：