Используйте этот тег для вопросов, касающихся использования DOM и привязок React Router v4, v5 и v6.

Подробнее про react-router-dom...

Я пытаюсь отобразить обзор книги, когда кто-то нажимает на любое из изображений книги (функция onClick), что должно привести их на страницу обзора книги этой конкретной книги в новом маршруте. Я загрузил обложки книг вручную в Books.js, а затем отобразил отдельные обложки книг в Book.js. Любая помо...
Мы переходим на версию 6.4 и используем createRoutesFromElements, как это предлагается в документах, для переноса наших маршрутов на новый маршрутизатор createBrowserRouter. Наша установка выглядит примерно так const router = createBrowserRouter( createRoutesFromElements(--> our routes go here <--...
3 Окт 2022 в 13:20
Следующий код не заменяет последнюю запись в стеке истории: // inside some component const navigate = useNavigate() // inside a hook or click handler navigate('/someroute', {replace: true}) // .. Я проверил интерфейс navigateFunction в документации, но не могу сказать что я делаю неправильно. htt...
Я хотел бы реализовать маршрутизацию в своем проекте, но я продолжаю получать одно и то же сообщение об ошибке и не могу понять, как решить проблему. Я хочу начать с компонента MappedCharacters и назначить его маршруту "/". Здесь я получаю следующее сообщение об ошибке: «Неперехваченная ошибка: [M...
Как вы можете видеть на фото: Когда я ввожу http:localhost:3000/ или какой-либо другой URL-адрес. Все это будет перенаправлено не на тот сайт:http:localhost:3000/product/productID. вот относительные коды: App.jsx. Этот устанавливает путь для маршрута. import React from 'react' import Cart from ...
2 Окт 2022 в 10:00
fromComponent.js const history = useHistory(); const handleUserSubmitData = () => { history.push("/"); }; <Form onSubmit={() => handleUserSubmitData}> </Form> После отправки он перенаправляется на /? не к/. не могли бы вы помочь мне решить эту проблему? ...
2 Окт 2022 в 08:58
У меня есть функция оплаты, которая вызывается нажатием кнопки, и если пользователь не вошел в систему, я хочу перенаправить этого пользователя на компонент входа. Это мой код функции. const PaymentMethod = ()=>{ if(!isAuthenticated()) { toast.error('Please signin...
Запуск моего приложения на --> http://localhost:8000 Я создал компонент под названием «NavBar», и в этом компоненте я создал ссылку на «/home». В «/home» я просто отображаю следующий текст -> «Test React Router Dom» В компоненте «NavBar» нажатие на «Ссылка на «/home» работает, но когда я пытаюсь обн...
Когда я пытаюсь отобразить элементы, я ничего не могу отобразить, даже если <Link to=""> работает нормально. Мне нужна простая панель навигации с использованием react-router-dom, чтобы создать многостраничное веб-приложение. Я надеюсь, что эту ошибку можно решить без какого-либо сложного кода, пот...
Я создаю приложение с помощью react v18 и react-router-dom v6.4.1, где я использую функцию createBrowserRouter, как показано в документации (https://reactrouter.com/en/main/start/tutorial#adding-a-router). Однако он вообще не работает, даже если просто настроить простой корневой маршрут, который во...
30 Сен 2022 в 15:50
У меня есть этот небольшой проект, где я ввожу некоторую информацию о пользователе в форму, и при отправке она будет отображаться на той же странице в таблице. Кажется, это работает по назначению, но затем, когда я нажимаю на домашнюю страницу, а затем возвращаюсь на страницу формы, список пуст. Я...
Привет, я новичок в том, чтобы реагировать и реагировать на маршрутизатор. У меня есть страница упражнений, содержащая несколько упражнений, поэтому, когда я нажимаю упражнение, я могу получить индивидуальное упражнение. <Link to={`exercice/${item.id}`} exact path={`exercice/${item.id}`} className=...
29 Сен 2022 в 22:19
Я пытаюсь включить маршрутизацию на стороне клиента, используя react-router во встроенном приложении shopify. Я использовал это руководство a> из Shopify, но я не совсем понимаю, что должно быть в файле ./Routes. Я пробовал искать похожие вопросы в Stack Overflow или в блогах, но информация там не...
Я создаю веб-сайт электронной коммерции, я хочу сделать функцию, где, если пользователь нажимает на определенный продукт, пользователь должен иметь возможность видеть сведения о продукте этого конкретного продукта. Я хочу реализовать это в реакции js с помощью dom-маршрутизатора, как мне передать и...
29 Сен 2022 в 13:05
Я пытаюсь немного попрактиковаться в маршрутах и ​​маршрутизации, и столкнулся с некоторыми проблемами, которые не смог решить. Моя ошибка, кажется, имеет место в методе рендеринга в App.js. Все довольно прямолинейно. Я пытаюсь создать getDogFunc, который должен помочь мне найти определенный элемен...
У меня есть список таких объектов маршрута: export const routes = [ { path: '/about', element: About, exact: true }, { path: '/posts', element: Posts, exact: true }, { path: '/posts/:id', element: PostDetails, exact: true }, ] У меня есть компонент AppRouter, в котором я хочу передать список ...
Я хочу проверить параметры в моем компоненте и выполнить перенаправление, если они не передают какую-то логику. Две вещи могут пойти не так: React выдает мне предупреждение о рендеринге: Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`Home`). При обновле...
В моем приложении для реагирования у меня есть гостевые маршруты и защищенные маршруты. Защищенные маршруты доступны только после аутентификации пользователя. Кроме того, основные маршруты приложений доступны только тогда, когда пользователь подписал контракт и завершил регистрацию. Я отслеживаю ...
Я пытаюсь добиться этого: вариант 1 (классический): пользователь входит в систему ---> перенаправляется на домашнюю страницу. случай 2: пользователь переходит по ссылке на страницу приложения ---> ему предлагается войти в систему ---> после входа он перенаправляется на страницу, к которой он пытался...
28 Сен 2022 в 11:50
Я следую учебному пособию ReactJS, в котором репетитор использует компоненты на основе классов (а не хуки в этот момент) и react-router-dom, который все еще использует рендеринг и компонент (без использования ключевого слова «элемент»). Итак, я нашел, как понизить версию react-router-dom: npm instal...
Я использую реагирующий маршрутизатор v6, и я хотел бы использовать новый загрузчик для загрузки данных до загрузки компонента. Итак, у меня есть следующее В моем index.js const router = createBrowserRouter( createRoutesFromElements( <Route path="*" loader={async ({ params }) => { ...
28 Сен 2022 в 06:26
РЕДАКТИРОВАТЬ: я использую React 18.2.0 и React router dom 5.3.3, и недавно вечером я заменил React.Strictmode на Fragment в своем файле index.jsx. Как следует из названия, приложение работает хорошо, за исключением NavBar. Когда вы нажимаете на разделы, он не отображает компонент на странице, но h...
Я делаю рефакторинг в этом коде и не могу найти хорошую замену для этой части из-за react-router-dom v6, в котором нет useRouteMatch, потому что мне нужно получить параметры, которые находятся в URL: import React, { useEffect, useState } from 'react'; import { useRouteMatch, Link } from 'react-route...
У меня есть вопрос, связанный с реактивным маршрутизатором и компонентами класса в React, это первый раз, когда я использую компоненты класса в приложении, и я немного запутался с методами жизненного цикла. Моя проблема в том, что у меня есть компонент, в котором я отображаю продукты, в этом компоне...
В React router dom могу ли я передать реквизит в ссылке? Есть ли способ передать реквизит в Link, а не только компонент? Я пытаюсь передать реквизит внутри ссылки, как это. function App(){ const test = "Hello" return( <Link to="/detail" test={test}> detail </Link> ) } В моем под...
27 Сен 2022 в 14:52