Questions tagged [react-router-dom]
Use this tag for questions regarding DOM use and bindings of React Router v4, v5, and v6.
7,527
questions
-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 ...
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 ...
-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), ...
-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 ...
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 ...
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 ...
-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/...
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: &...
-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(...
-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: <...
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 ...
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 ...
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 ...
-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 ...
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 = ...
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://...
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 ...
-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 ...
-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 ...
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'...
-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 = {...
-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 ...
-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 ...
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&...
-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 ...
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 ...
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
|-- /...
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. ...
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, ...
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 ...
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 ...
-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 { ...
-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() {
<...
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 ...
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 &...
-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/...
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 ...
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() {
...
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>
<...
-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 ...
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 ...
-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 ...
-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([]);...
-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/...
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 &...
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-...
-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, { ...
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 &...
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,
...
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 />} />
...