Блог

В своем коде я настроил маршрутизацию реакции, чтобы при нажатии на ссылку URL-адрес в браузере менялся. Как я знаю, тег ссылки добавляет маршрут в историю маршрутизации при нажатии на него, и в моем случае это работает идеально. Могу ли я использовать браузере вперед и назад кнопки для перемещения просто отлично, но проблема остается, если я перейдите по ссылке вручную(например, переход на продукты, вписав /продукты в URL https://il72h.csb.app/products ), я не в состоянии добраться до главной страницы( https://il72h.csb.app/ ), нажав кнопку браузера «назад» кнопку, и я застрял на странице продуктов. Я попытался перенести маршрут в историю, когда компонент был отрисован, но это не помогло.

Вот код маршрута:

 import Productpage from "./productpage";
import Aboutpage from "./aboutpage";
import AProductPage from "./individualProductPage";
import Contactpage from "./contact";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Route exact path="/">
          <ul>
            <Link to="/products">
              <li>products</li>
            </Link>
            <Link to="/about">
              <li>about</li>
            </Link>
          </ul>
        </Route>
        <Route exact path="/about">
          <Aboutpage />
        </Route>
        <Route exact path="/products">
          <Productpage />
        </Route>
        <Route path="/products/:id">
          <AProductPage />
        </Route>
        {/* <Route exact path="/o">
          <Contactpage />
        </Route> */}
      </Router>
    </div>
  );
}
 

Как я пытался проложить путь к истории:

 import { Link, useHistory, useLocation } from "react-router-dom";
import Products from "./products";
export default function Productpage() {
  let history = useHistory();
  history.push("/products");
  console.log(history)
  return (
    <div>
      
    </div>
  );
}
 

Как я могу решить эту проблему?