Как перенаправить ha sh маршрут на базу при обновлении

Question

Допустим, у меня есть следующие маршруты:

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

Когда я нахожусь на / fruits / # / apple и обновляем sh страницу, я бы хотел перенаправить обратно на /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

Вы можете обнаружить refre sh на странице, используя window.performance.navigation.type, где значение равно 1, если страница была обновлена. В вашем компоненте Apple или Pear вы можете проверить это значение в функции componentDidMount или в хуке useEffect и перенаправить на / fruits любым удобным для вас способом, если это необходимо.

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

или

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

В зависимости от того, используете ли вы функциональные компоненты или нет