如何根据刷新重定向哈希路由

Question

假设我有以下路线：

/
/user
/fruits
/fruits/#/apple
/fruits/#/pear

当我打开/fruits/#/apple并刷新页面时，我想重定向回/fruits。

function App() {
return (
<div className="App">
<BrowserRouter>
<div>
<Route exact path="/" component={Home} />
<Route path="/fruits">
<HashRouter>
<>
<h1> Fruit shop </h1>
<Switch>
<Route path="/apple" component={Apple} />
<Route path="/pear" component={Pear} />
<Redirect to="/apple" />
</Switch>
</>
</HashRouter>
</Route>
<Route path="/user" component={Users} />
</div>
</BrowserRouter>
</div>
);
}

Answer 1

您可以使用window.performance.navigation.type检测页面上的刷新，如果页面已刷新，则值为1。在您的Apple或Pear组件中，您可以在componentDidMount函数或useEffect钩子中检查此值，并在需要时以您喜欢的任何方式重定向到/水果。

componentDidMount(){
if(window.performance.navigation.type === 1){
//Do your redirect here
}
}

或

useEffect(() => {
if(window.performance.navigation.type === 1){
//Do your redirect here
}
}, [])

取决于您是否使用功能组件