如何通过反应将页面重定向到重新加载或刷新页面时的菜单？答案

【问题标题】：How to redirect a page to menu on reload or refresh page with react?如何通过反应将页面重定向到重新加载或刷新页面时的菜单？
【发布时间】：2021-05-21 11:34:14
【问题描述】：

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

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 的内容。我只想在刷新页面或通过单击浏览器上的重新加载页面按钮重新加载它时才重定向到菜单。我该如何解决？

【问题讨论】：

查看此链接 - stackoverflow.com/questions/34735580/…
尝试将 Menu 组件封装在 withRouter 中。
@DiwakarSingh 我正在使用钩子，我不需要 withRouter，useHistory 的行为与 WithRouter 函数相同。

标签： javascript reactjs react-router window reload

【解决方案1】：

你需要添加开关：

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

【讨论】：

不能解决问题。

【解决方案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>
  );
}

【讨论】：