页面刷新时找不到 Firebase 反应路由器页面 - Javascript

在使用 Firebase 和 React Router 构建应用程序时，可能会遇到页面刷新后找不到 Firebase 反应路由器页面的问题。这可能是因为在页面刷新时，Firebase 和 React Router 状态可能被重置或清除，导致找不到正确的路由。

下面是一些可能的解决方案：

1. 使用 Firebase Auth 检查用户登录状态

在使用 Firebase 和 React Router 构建应用程序时，我们可以使用 Firebase Auth 检查用户的登录状态。如果用户已登录，则可以将其重定向到主页；如果用户未登录，则可以将其重定向到登录页面。

import { Route, Redirect } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";

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

export default PrivateRoute;

2. 使用 Firebase Hosting 配置重定向

在使用 Firebase Hosting 部署应用程序时，可以配置重定向规则以确保用户在刷新页面时正确路由到 Firebase 和 React Router 所需的页面。在 Firebase 控制台中，可以在“Hosting”菜单下找到“重定向”选项。

# Firebase Hosting 重定向规则

rewrite {
  if (path != "/" && path != "/index.html" && !path.startsWith("/static/")) {
    return 302 /index.html;
  }
  firebaseHosting {
    rewrite {
      from: /(*)
      to: /index.html
    }
  }
}

3. 使用 React Router HashRouter

React Router 还提供了一种名为“HashRouter”的替代方案，它在路由中使用哈希值而不是常规 URL。这可以确保在页面刷新时，React Router 和 Firebase 状态不会被清除，因为哈希值不会发送到服务器。

import { HashRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </HashRouter>
  );
}

export default App;

总之，在使用 Firebase 和 React Router 构建应用程序时，我们需要确保在页面刷新时可以正确路由到所需的页面。上述解决方案可能有所帮助，但具体解决方案取决于您的应用程序要求。