React JS：当用户刷新另一个特定页面时，如何重定向回我的主页？

Question

我目前设置了一个简单的 React JS 应用程序，它有 2 个页面 - 一个登录页面和一个“房间”页面。我正在使用 react-router 中的 useHistory 钩子。

预期行为

当用户在“房间”页面点击刷新时，应用程序将返回“登陆”页面。

预计行为

用户点击刷新，路径名确实在一瞬间更改为着陆页的路径名。并且“房间”页面再次自行安装，取代了“登陆”页面。

这是我的应用程序的代码 sn-ps：

App.js

import LandingPage from './components/pages/LandingPage';
import RoomPage from './components/pages/RoomPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={LandingPage}/>
        <Route path="/room-:roomId" component={RoomPage}/>
      </Switch>
    </Router>
  );
}

export default App;

着陆页

function LandingPage(){
    const history = useHistory();

    function toRoomPage(){
        history.push('/room-{room_id here}');
    }

    function onAnotherBtnClick(){
        console.log("hi");
    }

    return (
        <div className="landing-page-container page-container">
            <div className="landing-page-inner-panel">
                <div className="landing-page-inner-top">
                    Landing Page
                </div>
                <div className="landing-page-button-wrapper">
                    <button className="btn btn-primary" onClick={toRoomPage}>To Room Page</button>
                </div>
                <div>or</div>
                <div className="landing-page-button-wrapper">
                    <button className="btn btn-secondary" onClick={onAnotherBtnClick}>Another Button</button>
                </div>
            </div>
        </div>
    );
}

export default LandingPage;

房间页面

function RoomPage(){
    const history = useHistory();

    function onUnload(){
        history.replace("/");
    }

    useEffect(() => {
        window.addEventListener("unload", onUnload)

        return () => {
            window.removeEventListener("unload", onUnload);
        }
    }, [])

    return (
        <div className="room-page-container page-container">
            Room Page
        </div>
    );
}

export default RoomPage;

我不太确定 DOM 在刷新时的行为，因为我对 React JS 还很陌生。 .replace() 和 .push() 都试过了，还是不行。

我已经在网上连续搜索了 2 个小时，但无济于事。希望有人能给我一些启示。提前非常感谢。

Answer 1

解决办法如下：

App.js

import { Switch, Route, BrowserRouter as Router } from "react-router-dom";

import LandingPage from "./LandingPage";
import RoomPage from "./RoomPage";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route path="/room-:roomId" component={RoomPage} />
      </Switch>
    </Router>
  );
}

export default App;

LandingPage.js

import { useHistory } from "react-router-dom";

function LandingPage() {
  const history = useHistory();

  function toRoomPage() {
    history.push("/room-{room_id here}");
  }

  function onAnotherBtnClick() {
    console.log("hi");
  }

  return (
    <div className="landing-page-container page-container">
      <div className="landing-page-inner-panel">
        <div className="landing-page-inner-top">Landing Page</div>
        <div className="landing-page-button-wrapper">
          <button className="btn btn-primary" onClick={toRoomPage}>
            To Room Page
          </button>
        </div>
        <div>or</div>
        <div className="landing-page-button-wrapper">
          <button className="btn btn-secondary" onClick={onAnotherBtnClick}>
            Another Button
          </button>
        </div>
      </div>
    </div>
  );
}

export default LandingPage;

RoomPage.js

import { useHistory } from "react-router-dom";
import { useEffect } from "react";

function RoomPage() {
  const history = useHistory();

  function onUnload() {
    console.log("beforeunload");
    history.push("/");
  }

  useEffect(() => {
    window.addEventListener("beforeunload", onUnload);

    return () => {
      window.removeEventListener("beforeunload", onUnload);
    };
  }, []);

  return <div className="room-page-container page-container">Room Page</div>;
}

export default RoomPage;

CodeSandbox Live Demo

Answer 2

您需要检查位置路径是否在 App.js useEffect 内没有任何参数（它在第一次运行和用户刷新页面时运行），然后您可以检查路由是否与重定向不同，但为此您需要更改代码中的一些东西，我将列出步骤

1.你需要在index.js里面绑定App.js和BrowserRouter

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
  rootElement
);

2. 使用钩子 useLocation 来检查路由（路径名）和 useHistory 来重定向， useEffect 来检查用户是否重新加载了页面 代码

import { Switch, Route, Link } from "react-router-dom";
import LandingPage from './components/pages/LandingPage';
import RoomPage from './components/pages/RoomPage';
import { useEffect } from "react";
import { useLocation, useHistory } from "react-router-dom";

export default function App(props) {
  const location = useLocation();
  const history = useHistory();
  useEffect(() => {
    if (location.pathname == "/room") {
      history.push("/");
    }
  }, []);
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={LandingPage}/>
        <Route path="/room-:roomId" component={RoomPage}/>
      </Switch>
    </div>
  );
}

3.删除您在房间页面和登录页面中所做的替换

我已经使用了一个类似的示例 Codesandbox，如果需要，请参考