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>
  );
}

如何使用反应将页面重定向到重新加载或刷新页面的菜单？

2 个答案: