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
15
votes
3 answers

PrivateRoute not working in reactjs react-router-dom

I am completely stuck when integrating PrivateRoute HOC in my react.js project. Here is my route file import React, { Component } from "react"; import { Route, Redirect, Switch, BrowserRouter as Router } from 'react-router-dom'; import Dashboard…
Profer
  • 553
  • 8
  • 40
  • 81
15
votes
6 answers

How to detect route changes with react-router v4?

I need to detect if a route change has occurred so that I can change a variable to true. I've looked through these questions: 1. https://github.com/ReactTraining/react-router/issues/3554 2. How to listen to route changes in react router v4? 3.…
HunterLiu
  • 781
  • 3
  • 6
  • 20
15
votes
2 answers

React Router - are nested components an anti-pattern?

From React Router's docs: All children of a should be or elements. Only the first child to match the current location will be rendered. Nonetheless, nested statements are allowed. I use the pattern to break up…
cheshireoctopus
  • 1,670
  • 1
  • 22
  • 31
14
votes
0 answers

react-router's `useRouteError` has return type unknown, how to access its property

I started with react-router 6.4.3 on a new TS project, and found that its useRouteError hook has return type unknown. I am not very sure how to correctly access the properties of the returned error object. Based on this answer, I believe I have to…
tiwarib
  • 441
  • 6
  • 17
14
votes
2 answers

How to read RTK Query state without hooks in react-router 6.4

Recently new react-router 6.4 was released and it has the ability to load data before render of component. (https://reactrouter.com/en/main/start/overview#data-loading) This seems like a cool feature. And I want to use it with RTK Query, since I…
Yastrebtsov
  • 143
  • 1
  • 6
14
votes
1 answer

Redirect in react-router-dom V6

I need to navigate back to the original requested URL after login. For example, user enters www.example.com/settings as user is not authenticated, it will navigate to login page www.example.com/login. Once authenticated, it should navigate back to…
Ben Li
  • 203
  • 1
  • 2
  • 5
14
votes
12 answers

React - TypeError: Cannot read properties of undefined (reading 'params')

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params') TypeError: Cannot read properties of undefined (reading 'params') 5 | import products from '../products' 6 | 7 | function…
kiri
  • 161
  • 1
  • 1
  • 5
14
votes
1 answer

React-Router: Why is the useHistory undefined in react?

I have this. It is exactly the same as it says in the documentation. I think the react-router-dom module is fine because in other components the BrowserRouter, Router and Link work for me import { useHistory } from "react-router-dom" import React…
MiguelParkour
  • 151
  • 1
  • 1
  • 4
14
votes
2 answers

Why does useParams during test return undefined in test env with wrapper?

I have seen this in 2 different code bases now and am stumped because it works fine in the actual browser but not the tests: if a component uses the useParams hook, the hook throws an error in the test: Error: Uncaught [TypeError: Cannot…
Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
14
votes
3 answers

Styling react-router-dom Link using styled-components getting warning when passing props

import styled from 'styled-components'; import {Link} from 'react-router-dom'; const LS = {}; LS.NavFixedItem_LINK = styled(Link)` display: flex; justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'}; align-items:…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
14
votes
2 answers

static website hosted in s3: pages return 404 after refresh

With this bucket policy: { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource":…
jamesdeath123
  • 4,268
  • 11
  • 52
  • 93
14
votes
4 answers

dynamic basename with BrowserRouter in react-router-dom

Please I have an issue building a multi-tenant SaaS solution. For every tenant, I want them to use a subdomain, so i can get the subdomain from the url, make a call to a REST api that returns data about that tenant. For example, the admin…
Lateefah
  • 565
  • 1
  • 5
  • 13
14
votes
2 answers

Apply styled component style to a third party components

I am learning react and I started by using styled-components and react-router dom But I face difficulties apply my custom styled component to an existing component not created by me. Here is the code: import React from "react"; import { NavLink }…
Hairi
  • 3,318
  • 2
  • 29
  • 68
14
votes
3 answers

Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

I'm working on react-router-dom and in console this error is appearing. Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
Majid NWL
  • 317
  • 2
  • 3
  • 11
13
votes
2 answers

What is the difference between BrowserRouter and createBrowserRouter in react-router v6? Can I use createBrowserRouter without using data APIs?

I have read this in the documentation but I am not sure what the difference between BrowserRouter and createBrowserRouter. This is what it says in docs: createBrowserRouter: This is the recommended router for all React Router web projects. It uses…
Yazan Qarabash
  • 155
  • 1
  • 8
1 2 3
…
99 100