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
41
votes
4 answers

How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?

I was trying to create a as describe in the react-router documents using TypeScript. Can anyone help me out? The privateRoute in react-router document: const PrivateRoute = ({ component: Component, ...rest }) => (
Charlie
  • 1,520
  • 1
  • 12
  • 25
39
votes
6 answers

Cannot read property 'history' of undefined (useHistory hook of React Router 5)

I am using the new useHistory hook of React Router, which came out a few weeks ago. My React-router version is 5.1.2. My React is at version 16.10.1. You can find my code at the bottom. Yet when I import the new useHistory from react-router, I get…
39
votes
12 answers

Failed to compile. Module not found: Can't resolve 'react-router-dom'

After npm start, the browser gives the error: Failed to compile ./src/components/App/App.js Module not found: Can't resolve 'react-router-dom'. React-router-dom has been added to the dependencies in npm and so has react-router and react. Project…
Dokme
  • 425
  • 2
  • 6
  • 9
38
votes
5 answers

React wrapper: React does not recognize the `staticContext` prop on a DOM element

I'm trying to create a wrapper component around the react-router-dom NavLink component. I would like my custom component to accept all of NavLinks props, and proxy them down to NavLink. However when I do this, I'm getting: Warning: React does not…
Nicolas Widart
  • 857
  • 2
  • 10
  • 27
34
votes
3 answers

What is difference between react-router 4.0, react-router-dom and react-router-redux?

I am implementing routing in react-application. I am confused between the advantage of react-router 4.0 over react-router-redux. I am also confused by react-router-dom. What are the advantages and disadvantages of react-router-redux, react-router…
Gorakh Nath
  • 6,352
  • 11
  • 33
  • 58
33
votes
2 answers

How to make a Material UI react Button act as a react-router-dom Link?

How can I make a Material UI react Button component act as a Link component from react-router-dom without losing it's original style? Like changing the route on click. import Button from '@material-ui/core/Button';
33
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
  • 3,191
  • 5
  • 26
  • 50
33
votes
4 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
  • 3,649
  • 7
  • 31
  • 67
31
votes
2 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…
28
votes
2 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.
  • 939
  • 1
  • 11
  • 18
28
votes
9 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…
arsho
  • 9,664
  • 8
  • 37
  • 53
25
votes
2 answers

React Router with custom history not working

When I was using BrowserRouter from react-router-dom, My Routes were working. But to use custom history, I replaced BrowserRouter with Router from react-router. After that my Route components are not loading properly but the url is changing…
24
votes
7 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
  • 2,525
  • 4
  • 39
  • 58
23
votes
1 answer

React-router-dom and Redirect not being added to history?

Outline: I'm currently trying to learn react/redux/router. As a practice project, I'm working on a basic contact/client management app. While using react-router-doms Redirect component. I can't get the back/forward navigation to work as…
denden
  • 1,219
  • 10
  • 21
23
votes
1 answer

React-router: never unmount a component on a route once mounted, even if route change

I have a React application that declares some routes :
guillaumepotier
  • 6,893
  • 8
  • 40
  • 70