Блог

Я работаю над простым React storefront, и в настройке моего маршрутизатора есть ошибка. Я предоставил скриншоты соответствующих файлов и сообщения об ошибке. Поток файлов для маршрутизатора Navbar.js -> App.js -> Index.js. Я долгое время не выполнял маршрутизацию, поэтому прошу прощения, если я упускаю какие-то детали или что-то неправильно объясняю. Любые предложения помогут.

Компонент «Router» необходим только один раз, как у вас в index.js

Navbar.js не нуждается в компоненте «Router», поэтому вы можете удалить его. Также ваш импорт «маршрутизатора» неверен в Navbar.js (это правильно в index.js )

импортируйте { BrowserRouter как маршрутизатор} из «react-router-dom»

Вам необходимо использовать this.props компоненты класса React. this.props.history.location

Я полагаю, что компонент маршрутизатора сообщает нам начать прослушивание местоположения. Итак, в вашем App.js начните с включения импорта useLocation в ваш react-router-dom. Затем заставьте useEffect прослушивать местоположение, чтобы маршрутизатор всегда мог знать, в каком местоположении вы находитесь, и тем самым определять, какой компонент маршрута показывать.

Пример:

 import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
  }, [location]);
  return ( ...
}