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

3682 questions
232
votes
6 answers

React : difference between and

Can someone explain the difference between and I don't know the meaning of 'exact'
batt
  • 2,382
  • 2
  • 8
  • 11
103
votes
8 answers

Detect Route Change with react-router

I have to implement some business logic depending on browsing history. What I want to do is something like this: reactRouter.onUrlChange(url => { this.history.push(url); }); Is there any way to receive a callback from react-router when the URL…
Aris
  • 1,978
  • 5
  • 16
  • 25
94
votes
10 answers

How to get query parameters in react-router v4

I'm using react-router-dom 4.0.0-beta.6 in my project. I have a code like following: And I want to get query params in HomePage component. I've found location.search param, which looks like this:…
andrfas
  • 1,192
  • 1
  • 9
  • 14
74
votes
1 answer

React-Router - Link vs Redirect vs History

There seems to be some confusion with what to use over the other: history.push('/some/path') I have been using React/Router for a little while now, and different posts/answers say different things…
Phillip
  • 2,486
  • 3
  • 21
  • 39
74
votes
7 answers

Jest, Enzyme: Invariant Violation: You should not use or withRouter() outside a

I have a which outputs one component and list of contacts presentated by . The problem is that in the test for when I try to mount it, test outputs an error Invariant Violation:…
Maryja Piaredryj
  • 1,314
  • 3
  • 13
  • 27
63
votes
5 answers

ReactJS - Pass props with Redirect component

How should you pass props with the Redirect component without having them exposed in the url? Like this
Michiel
  • 1,131
  • 1
  • 11
  • 23
54
votes
6 answers

Multiple Nested Routes in react-router-dom v4

I need multiple nested routes in react-router-dom I am using v4 of react-router-dom I've got my import { BrowserRouter as Router, Route } from 'react-router-dom'; and I need the components to render like so --- Login --- Home --- Page 1 ---…
Aditya Talpade
  • 713
  • 1
  • 7
  • 13
51
votes
3 answers

BrowserRouter vs Router with history.push()

I am trying to understand the difference between BrowserRouter and Router of the react-router-dom (v5) package and what difference it makes for my example below. The documentation says: BrowserRouter A that uses the HTML5 history API…
mitchkman
  • 4,963
  • 7
  • 30
  • 55
51
votes
2 answers

React router Switch behavior

(react-router-dom version: 4.1.1) I have working routes set up, but I'm a bit confused about why the was necessary: index.js import React from 'react'; import { HashRouter, Route, Switch } from 'react-router-dom'; import App from…
Jess
  • 1,337
  • 3
  • 19
  • 30
51
votes
7 answers

How to parse query string in react-router v4

In react-router v3 I could access it with props.location.query.foo (if the current location was ?foo=bar) In react-router-dom@4.0.0 props.location only has props.location.search with is a string like ?foo=bar&other=thing. Perhaps I need to manually…
Peter Bengtsson
  • 6,067
  • 8
  • 39
  • 51
50
votes
23 answers

Invariant failed: You should not use outside a

I use react-router-dom for routing in my React application. Part of my app extracted in another package. List of dependencies looks like this: ./app/dashboard/package.json { "dependencies": { "@app/components": "^1.0.0", "react":…
Pavel
  • 1,720
  • 3
  • 12
  • 40
47
votes
6 answers

Simple Conditional Routing in Reactjs

How to make conditional Routing, if and only if some conditions satisfies then only routing should happen. for example, if and only if the user enters the correct credentials login should be successful and the user should be able to see the welcome…
Srikanth Gowda
  • 4,057
  • 5
  • 15
  • 29
47
votes
5 answers

Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)

I have a Dashboard with rotating slides, each of which has a corresponding tab in Bldgs. Both Dashboard.js and Bldgs.js are children to my App.js. When a user clicks on a specific slide A in Dashboard.js, Dashboard needs to tell App.js so that App…
Mike
  • 1,077
  • 3
  • 12
  • 28
42
votes
3 answers

react-router Redirect vs history.push

I was reading react-router-redux examples and I confused, what is the difference beetween: import { Redirect } from 'react-router-dom' ... and import { push } from 'react-router-redux' ... push('/login')
tandav
  • 614
  • 1
  • 8
  • 12
41
votes
3 answers

TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'

I get a typeScript error after upgrading to version 4 Used in useParams () from react-router-dom "typescript": "^4.0.2" import { useParams } from 'react-router-dom'; const { sumParams } = useParams(); Property 'sumParams' does not exist on type…
Yoel
  • 3,793
  • 3
  • 15
  • 39
1
2 3
…
99 100