如何在重新加载或刷新页面时将页面重定向到菜单？

Question

我想在用户重新加载或引用当前页面时将他重定向到菜单页面。

Menu.js:

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

export default function Menu() {
  const history = useHistory();
  const handleClick = () => {
    history.push("/myComponent");
  };
  return (
    <div>
      <h1>Menu Page</h1>
      <button onClick={handleClick}>Go to MyComponent</button>
    </div>
  );
}

MyComponent.js:

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

export default function MyComponent() {
  const history = useHistory();
  const handler = function () {
    history.push("/");
  };
  useEffect(() => {
    window.addEventListener("beforeunload", handler);
    return () => {
      window.removeEventListener("beforeunload", handler);
    };
  }, []);
  return (
    <div>
      <h1>My Component Page</h1>
    </div>
  );
}

App.js:

import { Router, Route } from "react-router-dom";
import Menu from "./Menu";
import MyComponent from "./MyComponent";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router history={history}>
      <Route exact path="/" component={Menu} />
      <Route exact path="/myComponent" component={MyComponent} />
    </Router>
  );
}

当我在 MyComponent 页面上并重新加载页面时，路径 url 更改为“/”，但页面显示 MyComponent 的内容。只有当我刷新页面或通过单击浏览器上的重新加载页面按钮重新加载它时，我才想被重定向到菜单。我该如何解决？

Answer 1

您需要添加开关：

<Router history={history}>
    <Switch>
      <Route exact path="/" component={Menu} />
      <Route exact path="/myComponent" component={MyComponent} />
    </Switch>
  </Router>

Answer 2

为了解决这个问题，我创建了一条新路线 RefreshRoute :

import React, {useCallback, useEffect} from 'react';
import {Redirect, Route} from 'react-router-dom';



const RefreshRoute = ({
  component: Component,
  redirectionPath,
  ...rest
}: Props) => {
  redirectionPath = redirectionPath ?? '/';
  const perf = performance.getEntriesByType('navigation')[0].toJSON();
  const reloadType = perf.type !== 'reload';

  const handler = useCallback((e) => {
    e.preventDefault();
    e.returnValue = '';
    return true;
  }, []);

  useEffect(() => {
    window.onbeforeunload = handler;

    return () => {
      window.onbeforeunload = handler;
    };
  });
  return (
    <>
      {reloadType ? (
        <Route component={Component} {...rest} />
      ) : (
        <Redirect to={redirectionPath} />
      )}
    </>
  );
};
export default RefreshRoute;

App.js:

import { Router, Route } from "react-router-dom";
import Menu from "./Menu";
import MyComponent from "./MyComponent";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router history={history}>
      <Route exact path="/" component={Menu} />
      <RefreshRoute path='/myComponent' redirectionPath='/' />
    </Router>
  );
}

如何在重新加载或刷新页面时将页面重定向到菜单？

How to redirect a page to menu on reload or refresh page with react?

javascript

window

reload

reactjs

react-router