Stack Overflow
Stack Overflow

Questions tagged [react-router-dom]

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

Introduction

React Router DOM is a package that contains all the DOM bindings for React Router. That includes things such as HashRouter and BrowserRouter which are specific to DOM use for the browser.

Docs

Related tags

7372 questions
2
votes
2 answers

React router dom navigate method is not working properly

Hei, I am trying to build a simple react app with a navigation feature. The main theme is I have 3 components, App, Test, and AppShell. App component is the default(Initial) component. And what I want is that Every time user goes to App component,…
Amjad
  • 330
  • 7
  • 22
2
votes
1 answer

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') : how to solve this router issue?

"react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "5.2.0", This is my App.js file import React from "react" import Navbar from "./components/Navbar" import Main from "./components/Main" import Details from…
Roshni Patel
  • 21
  • 1
  • 5
2
votes
3 answers

Why are my React components rendering in all routes?

This is the my App() function in App.js, the comps :"Sidebar, Feed and Widgets" keeps rendering in route ="/" and also ="/login" as well, in addition to that "Login" comp didn't even render in route ="/login".
…
Niranjan
  • 38
  • 5
2
votes
1 answer

React js Error: Uncaught Error: [BrowserRouter] is not a component. All component children of must be a or

I'm new on React and I'm facing the error "Uncaught Error: [BrowserRouter] is not a component. All component children of must be a or ". I'm trying to do a private route to avoid users to land on the dashboard without being loged…
alvesdaniel
  • 33
  • 6
2
votes
1 answer

Difference in the navigation (React Router v6)

Is there a difference in having "/" before the name of the path? Should I get different results if in one case I am using "/" while navigating from page 1 to page 2: navigate({ pathname: 'page2', search: `?${createSearchParams({ email: username…
Elena Alexeenko
  • 100
  • 4
  • 13
2
votes
1 answer

Uncaught Error: useNavigate() may be used only in the context of a component

Hello guys facing this and dont know how to solve this Tried everything to resolve this is this because of latest router library version just show you the patch of code import "./App.css"; import Form from "./Form"; import { BrowserRouter as…
Gajanan Shinde
  • 183
  • 1
  • 4
  • 15
2
votes
1 answer

how to use redirect react-router-dom v6?

The user is in home page and if he goes to any protected route(cart page, profile page) without authentication he will be Redirecting to login page and after login they must not return to home page, they must go to the current location they were…
Haree Prasad
  • 103
  • 1
  • 2
  • 8
2
votes
1 answer

React Router6: issue while passing element to private route

I am trying to create a PrivateRoute component as: import { useStoreState } from 'easy-peasy'; import React, { Component } from 'react'; import { Navigate, Route } from 'react-router-dom'; // import styles from'./index.module.scss'; interface…
Varun Sukheja
  • 6,170
  • 5
  • 51
  • 93
2
votes
1 answer

React Router v6 - Create Invalid Path Redirect

I want to make it so if the user enters an invalid path in the URL it automatically redirects them to the homepage. Something like this: }/>
Josh Ackland
  • 603
  • 4
  • 19
2
votes
1 answer

React Switch is not exported from 'react-router-dom'

I want to add router in my page to route between components. I am using switch to change between route but it is throwing an error as switch is not exported to react router dom. If this the problem with the react version i want to know how to change…
Rizvi Ahmed Zillhaz
  • 57
  • 1
  • 9
2
votes
1 answer

Redirect with useNavigate and state seems to be hard to accomplish

What I am trying to do: I have a form that a client is filling out. They choose the day and time of an appointment before paying for the appointment. During payment, they get redirected to a hosted payment page and then they come back to complete…
mike
  • 109
  • 2
  • 10
2
votes
1 answer

How to create admin route using react router v 6

Hello i'm new to react development and recently react router has been updated to v 6 and that caused a lot of problem when i try to create an admin route. for example in v5 i used . but it does not work…
Md Yousuf Hossen
  • 23
  • 5
2
votes
0 answers

useNavigate outside functional component - react-router version-6?

Is there a way to use useNavigate() hook outside functional component in react-router v6? I'm trying to use navigate(url) inside a saga function. I know in v4 we could do something like this: const history = createBrowserHistory(); function*…
MD. Rukon Uddin
  • 21
  • 2
2
votes
1 answer

Public and private routes in react using local storage

I'm trying to implement public and private routes in my project. the the uncommented section which has the private route works perfectly fine it denies the user from going to main page if it's not authenticated . Now I'm trying to configure the…
Nagween Jaffer
  • 180
  • 3
  • 13
2
votes
2 answers

How to use map function with react router?

I have a list of pageNames and a list of pageUrls. I would like to create a router that generates a react component for each page in the list and uses a navbar with router links. I think the problem lies in the forEach function but I am not…
Jadon Erwin
  • 551
  • 5
  • 25
1 2 3
…
99 100