Questions tagged [react-router-dom]

Use this tag for questions regarding DOM use and bindings of React Router v4, v5, and v6.

Filter by
Sorted by
Tagged with
-1 votes
0 answers
25 views

React Router 404 Error on Direct Route Access

Working on a React project utilizing React Router for client-side navigation. When attempting to access a specific route directly (e.g., "/dashboard") in the browser, a 404 error is ...
Tech Developer's user avatar
2 votes
2 answers
60 views

navigate function does not navigate to the desired page

I am creating a basic React application and I have a problem with setting up the navigation. Below is a code for a Navbar component which once the user clicks logout button should clear the ...
Saydon's user avatar
  • 21
-1 votes
0 answers
19 views

Show background tasks in Alert Dialog in React js [closed]

The context of the application is that, i need to show background tasks like file uploading progress in an alert dialog ( which will be positioned at right bottom corner like YouTube mini player), ...
Ranganath MD's user avatar
-1 votes
0 answers
29 views

User keeps getting redirected to the home page after specifically telling it not to

I have a doctor appointment application, when I log in or register whether as a doctor or as a patient, I put the user information in a use context state. I distinguish each user by adding a role, so ...
gerard's user avatar
  • 259
1 vote
1 answer
26 views

React Context resets after changing routing using useNavigate

I am having an issue where my react context data resets whenever I change routes using React-Router-DOM v6 as my routing library. I'm very confused because while I understand manually entering a new ...
Ayaz Uddin's user avatar
2 votes
3 answers
52 views

How to redirect user to component of page

So I want when a user clicks the "Contact" link in my NavBar component to navigate to the home page to the specific Contact component. I tried using React-Router-DOM to navigate user to the ...
Konvas's user avatar
  • 33
-1 votes
1 answer
57 views

Home Page working properly in localhost but throwing error after hosting on Vercel

I created a todo app using react, react-router-dom, redux, and localStorage. It is working fine in localhost, but after hosting in vercel it is showing my error page. When I go to "hostURL/...
Suman Maji's user avatar
1 vote
1 answer
37 views

How to Accept 2 different path using react-router v6 createBrowserRouter?

I am using react-router-dom and createBrowserRouter to create the routes. export const router = createBrowserRouter([ { path: "/", element: <AuthLayout />, errorElement: &...
aharo vishinsky's user avatar
-1 votes
1 answer
52 views

How do I make my carousel respond to url changes?

I have a gallery, that opens individual images in a carousel. Unfortunately, I can't make it respond to URL path changes. const { signatura } = useParams(); const selectedPhotoIndex = useSelector(...
Andrija Vranić's user avatar
-1 votes
0 answers
22 views

createBrowserRouter tries to get files from wrong url

Hi guys I have a createBrowserRouter in my app which looks like this: const router = createBrowserRouter([ { path: "/", element: <EnterPage />, }, { element: <...
Matan's user avatar
  • 93
0 votes
0 answers
32 views

TS library using react-router with support for both v5 and v6 throws Webpack error - export was not found in 'react-router-dom'

I am building a library that uses React-Router. It assumes there is Router Provider on top and uses some hooks from react-router-dom package. As such, react-router-dom library is added to ...
Nikola's user avatar
  • 101
0 votes
0 answers
6 views

how to resolve the problem export switch in react probraming [duplicate]

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: I have replace the Switch with Routes then another problem happen which is thie export 'Switch' (imported ...
Askebir's user avatar
1 vote
1 answer
44 views

Framer Motion Page Transition with React Router DOM v6 causes rerender of layout components (esp. Sidebar) on Page Change

I recently added page transition to my React app using the library Framer Motion and React-Router-DOM. However, all layout components such as sidebar, navbar, etc. have been experiencing unwanted ...
alas.code's user avatar
-3 votes
0 answers
64 views

Some of my <Route> are not working in React [closed]

Please Note i am a coding newbie I seem to keep having issues linking different pages/components using react-router-dom In my app I want to be able to navigate to the likes of the content page, price ...
Christopher Bracegirdle's user avatar
1 vote
2 answers
62 views

Can't redirect/navigate from axios interceptors in React.js

I want to redirect to '/login' in axios interceptor while handling error. My code: import axios from "axios"; import { redirect } from "react-router-dom"; export const instance = ...
Kirill Stepankov's user avatar
1 vote
1 answer
13 views

Why do my React routes no longer match when I configure Vite base?

Before setting base in my Vite configuration I can visit the app root at http://localhost:5173 without issue (renders 'Home'). When I add base though with a value of /tools/evidence and visit http://...
Brendan's user avatar
  • 18.9k
1 vote
1 answer
69 views

React Router: Routes not updating content without manual page refresh [duplicate]

I'm facing an issue with React Router where routes are not updating without a page refresh. I'm using BrowserRouter in my React app. The navigation works, but the content doesn't update until I ...
Irakli Gvelesiani's user avatar
-1 votes
0 answers
42 views

reload react-router loader on leaflet-react event

I'm using React Router with Leaflet React to display a list of places that are visible on the map as map markers (map pins). The problem is, that I would like to show on the list only countries that ...
AKJr's user avatar
  • 1
-2 votes
0 answers
15 views

Routing Problems occurring when using ReactJs inside Tizen emulator [closed]

React js routing between the components is not working in the tizen emulator. What is the solution for it? I am running the next build file in the tizen software but it shows only index.html file of ...
Mukesh Gupta's user avatar
0 votes
2 answers
52 views

How do i use a useState variable outside the component in the same file? [duplicate]

I was working on a project that fetches data from swiggy api, but now I have added routing to the project. I don't know how can I use a state variable outside of the component but in the same file. I'...
Bruce Wayne's user avatar
-1 votes
0 answers
35 views

react router location state changed to null on return from google signin

using react-router-dom v.6.18.0 I set the location state like this: const callingurl = location.pathname + location.search + location.hash return <Navigate to = {`/signin`} state = {...
HenrikBechmann's user avatar
-1 votes
1 answer
46 views

Export 'CreateBrowserRouter' was not found in 'react-router-dom' [closed]

I'm new to react programming. I'm trying to implement a router and I want to use CreateBrowserRouter(), but when I compile the project, the compiler tells me that CreateBrowserRouter was not found in ...
Ismael Carrion's user avatar
-2 votes
0 answers
28 views

Nested react router outlet doesn't show [closed]

i try to make nested routing with react-router but my nested components in Account don't show for some reason. app.tsx import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import ...
Felll's user avatar
  • 1
1 vote
1 answer
68 views

React router dom navigating to wrong path

We are using React-Router-DOM v6.19.0 and there are two you can find below. <Route path="/route1/*" element={<RouteOneList />} /> <Route path="/route1/:one/:two/:three&...
Kesavan R's user avatar
  • 671
-3 votes
2 answers
51 views

how to know what the previous page is in react?

const navigate = useNavigate(); navigate(-1) This is what I am trying to do. However, I want to know what the previous page is before going back. If the previous page is some other site, then of ...
Bear Bile Farming is Torture's user avatar
0 votes
2 answers
51 views

Issue with useNavigate() Hook in Custom React-Admin Application

I'm facing a challenging issue in my React-Admin application. When I try to use the useNavigate() hook within my custom login component (MyLoginPage), I'm getting the following error: [Route] is not a ...
Janus's user avatar
  • 675
1 vote
1 answer
30 views

I want to split my web app into 2 parts using react router. I am using a router inside of one of the previously mentioned routes

/src |-- /components | |-- /signin | |-- SignIn.js | |-- /home | |-- Home.js | | |-- /dashboard | |-- Dashboard.js | |-- /assignee |-- /App.js |-- /...
Rahul Compani's user avatar
0 votes
1 answer
71 views

How to block the navigation in React Router DOM v6? [duplicate]

In our application, we are showing a modal if the form is not saved with help of history.block() in React Router DOM v5. In the latest version, v6, it's removed. Please find the actual code below. ...
Kesavan R's user avatar
  • 671
0 votes
1 answer
52 views

mock usePrompt in react-router-dom v6

Prompt.js import { unstable_usePrompt as usePrompt } from 'react-router-dom'; // eslint-disable-next-line react/prop-types export default function Prompt({ when, message }) { usePrompt({ when, ...
Alexei Delezhov's user avatar
3 votes
2 answers
46 views

How to define child routes for specific params?

In React-Router-Dom 6 I am using useRoutes and so I build a route object. I have a route where I want the top of the route to have a layout, and then different outlets based on the param. So for ...
Ronny Efronny's user avatar
0 votes
0 answers
21 views

React Router Nested Routes not rendering child components [duplicate]

I am doing some fairly nested routing using React router Dom in my React project. I can't seem to get my level of routes below the OrganizationView to show up. It was working before but added the ...
jonteal's user avatar
-1 votes
1 answer
46 views

How can I use React Router v6 to pass state from a parent route to a child route?

I am trying to build a page with tabs on it. I'd like each tab to be it's own route. /project/:id/a /project/:id/b /project/:id/c I create my router in my <App /> component. App.tsx import { ...
Michael Lynch's user avatar
-2 votes
1 answer
54 views

Router is ignored [closed]

Versions: "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.19.0", Code: export default function Board() { <...
Kifsif's user avatar
  • 3,557
1 vote
1 answer
105 views

Cannot navigate in react

This is my code to happen when submit button is clicked const location = useLocation(); const from = location.state?.from?.pathname || "/"; // The above lines are perfectly fine in the ...
Konduru Premsai's user avatar
2 votes
1 answer
49 views

React Router not responding to Param

I've been going through some other threads but have not found an answer to help me out. I'm building a very simple E-commerce website. The router has been working fine until I get to a route like &...
Grant's user avatar
  • 453
-1 votes
0 answers
38 views

React-router refreshing the DOM every time when route changes

I have a route setup like below, www.appurl.com/home www.appurl.com/firstparent/one www.appurl.com/firstparent/two www.appurl.com/firstparent/three www.appurl.com/secondparent/one www.appurl.com/...
Ajithkumar S's user avatar
2 votes
2 answers
51 views

How to get route params in navbar in React 18, React-Router 6

I have a React frontend. The code follows below. My problem is that I need to get route information outside <Routes>, in navigation menu and I can't use useParams(). On the other hand, I tried ...
Gigi's user avatar
  • 192
1 vote
2 answers
53 views

How can I make redirect on page after login correctly?

I am trying to redirect user after successful login. I did it this way but it does not work. How can I fix this issue or how can I do it correctly? main.jsx Login.jsx imports ... function Login() { ...
heheheha's user avatar
0 votes
2 answers
57 views

How do I merge two sets of routes under one path in React Router v6 [duplicate]

I have two sets of routes defined in different files. I want them both to be appended to the same path. There is no overlap in the route names. e.g. const EditRoutes = () => <Routes> <...
Brendan's user avatar
  • 18.9k
-1 votes
0 answers
21 views

REACT ROUTING does not work with the build generated with WEBPACK, how can I solve this?

So I build the react app and serve it with express. I use webpack to create the bundle. however, I can't make it work properly, when I login I managed to redirect to the right page but this time when ...
FaFa's user avatar
  • 364
1 vote
1 answer
26 views

Route render prop not rendering component [duplicate]

Does anyone know how to fix this: <Route exact path="/post/:id" render={props => <Post {...props} />} /> When I use this code, no component is rendered when I clicked into ...
zenshin's user avatar
  • 11
-2 votes
0 answers
77 views

Issues with the type constraints and compatibility within React Router 6.19.0

I am having issues with the type constraints and compatibility within the react-router library, specifically related to the RouteObject, NonIndexRouteObject, and IndexRouteObject types. I am getting 6 ...
Nando's user avatar
  • 1
-1 votes
0 answers
44 views

How can I set up filtering on a nested route? [closed]

I have a gallery that is filtered through a react-select field, function TagoviSelekt({ tagoviOptions }) { const dispatch = useDispatch(); const [filterSelected, setFilterSelected] = useState([]);...
ydrea's user avatar
  • 77
-2 votes
1 answer
39 views

How can solve error which is "'BrowserRouter' is not defined"? [closed]

I have installed react-router-dom with version : [email protected]. I can't understand why the error keep promting. Error content is below. Anybody can help what is the problem? [eslint] src/...
Jihye Yoon's user avatar
1 vote
1 answer
24 views

React Router Wrapped in a BottomNavigation not loading the new component

I can not for the life of me figure out how to load the DMO page from a BottomNavigation component. Going to "/dom" works perfectly. Clicking the buttons does not work at all. The initial &...
thomasw_lrd's user avatar
1 vote
2 answers
35 views

I am Unable to Navigate to the Home Page Even after successful login

Below are the codes for simple login, but even after successful login the navigation is not working. I am unable to resolve this login.js import './Login.css' import { Link, useNavigate } from 'react-...
Adya Kumari's user avatar
-2 votes
0 answers
41 views

React Router Test Case Issue

below is the component code and it's test case. After upgrading react-router-dom version from 5.x to 6.x, I am getting lot of errors. please suggest/advice the required changes: import React, { ...
Gopal Lal's user avatar
4 votes
1 answer
46 views

Can someone tell me why this React Router structure doesn't work

I'm trying to practice with react routing, so I made this little web app based on geography. First I set up the router paths: import { StrictMode } from "react"; import { createRoot } from &...
De2nis's user avatar
  • 53
2 votes
1 answer
34 views

Error : [AppRoutes] is not a <Route> component

I am currently working on React-Router with this tutorial https://blog.logrocket.com/complete-guide-authentication-with-react-router-v6/ this is my App.jsx import { Route, createBrowserRouter, ...
Châu Đặng's user avatar
0 votes
0 answers
20 views

Showing the child route in a grandparent layout

In reactjs new version of React-Router-Dom const router = createBrowserRouter( createRoutesFromElements( <Route path="/"> <Route index element={<Index />} /> ...
Joshua Robert Tasin Dionio's user avatar

1
2 3 4 5
151