如何用react重新加载或刷新页面时将页面重定向到菜单?

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