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
58
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
  • 775
  • 2
  • 9
  • 14
58
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
  • 763
  • 1
  • 9
  • 13
56
votes
6 answers

How to navigate on path by button click in react router v4?

I have this paths in react-router-dom:
{/* app = home */}
everything is working fine,…
gpbaculio
  • 5,693
  • 13
  • 60
  • 102
55
votes
4 answers

How to mock history.push with the new React Router Hooks using Jest

I am trying to mock history.push inside the new useHistory hook on react-router and using @testing-library/react. I just mocked the module like the first answer here: How to test components using new react router hooks? So I am…
Albert Alises
  • 1,018
  • 1
  • 8
  • 19
52
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,515
  • 3
  • 23
  • 32
49
votes
13 answers

withRouter' is not exported from 'react-router-dom

After npm i --save react-router-dom and npm install --save with-router I tried to write import {withRouter} from 'react-router'; But I Get this error Attempted import error: 'withRouter' is not exported from 'react-router'. import React from…
apanay22
  • 567
  • 1
  • 5
  • 10
47
votes
4 answers

how to listen for route change in react-router-dom v6

am trying to migrate the old react router dom code to v6 and I want to know how to listen for route change, I am now using useHistory const history = useHistory() //then history.listen(...) I did read the new docs and I did find that useHistory was…
scripter
  • 1,211
  • 2
  • 11
  • 21
47
votes
7 answers

react router v6 navigate outside of components

In react-router v5 i created history object like this: import { createBrowserHistory } from "history"; export const history = createBrowserHistory(); And then passed it to the Router: import { Router, Switch, Route, Link } from…
kofyohugna
  • 547
  • 1
  • 4
  • 7
44
votes
5 answers

How to pass params into link using React router v6?

This is my main section class where all routes to the links is kept export default class Section extends React.Component { render() { return (
…
Beren
  • 684
  • 2
  • 9
  • 14
42
votes
10 answers

React hooks in react library giving Invalid hook call error

I create a react library using https://www.npmjs.com/package/create-react-library And successfully used it on other React project. But when I tried to use react hooks functionalities inside library it gives me following error. Invalid hook call.…
Janith Widarshana
  • 3,213
  • 9
  • 51
  • 73
40
votes
6 answers

Alternate way for optional parameters in v6

In v5, we could add trailing ? to route for optional parameters, but as in v6, the support for the same has been dropped, so what's the alternate way of writing the following piece of code? } />
ShadowLeaf
  • 411
  • 1
  • 3
  • 6
40
votes
13 answers

react-router does not work in production and surge deployments

My react application is working fine on localhost but when after i deployed it in gh-pages or surge it does not give me to move among pages using URL. This is the project repo link Demo url here users can go to signup page by clicking menuItem of…
isuruAb
  • 2,202
  • 5
  • 26
  • 39
39
votes
4 answers

Is it possible to use material-ui button navigation with react-router?

I have a web app that I'v designed with material-UI and as you can see below I'm using Button navigation for navigating through my basic landing page components.
El.
  • 1,217
  • 1
  • 13
  • 23
39
votes
4 answers

React doesn't reload component data on route param change or query change

I have a "home" component with links, and when you click a link the product component is loaded with the product. I also have another component which is always visible, showing links to the "recently visited products". These links don't work when on…
Galivan
  • 4,842
  • 9
  • 44
  • 76
38
votes
10 answers

Root Navlink always get active class React Router Dom

I am using react-router-dom: 4.2.2. I can add activeClassName to the current URL. But surprisingly the class is always added to root URL. While visiting a page, for example the error page like the screenshot below, the home navlink also getting the…
arshovon
  • 13,270
  • 9
  • 51
  • 69
1 2
3
…
99 100