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
88
votes
25 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 Perevezencev
  • 2,596
  • 3
  • 28
  • 49
86
votes
17 answers

react-router v6: get path pattern for current route

Is it possible to get the path pattern for the currently matched route? Example: } /> // Page.jsx function Page() { ... // usePathPattern doesn't actually exist const…
caseyjhol
  • 3,090
  • 2
  • 19
  • 23
82
votes
8 answers

react-router-dom v6 useNavigate passing value to another component

The version of react-router-dom is v6 and I'm having trouble with passing values to another component using Navigate. I want to pass selected rows to another page called Report. But, I'm not sure I'm using the right syntax for navigate method and I…
Jay Kim
  • 825
  • 1
  • 5
  • 7
75
votes
6 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
  • 7,555
  • 6
  • 27
  • 59
75
votes
6 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,713
  • 3
  • 16
  • 34
73
votes
10 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
  • 7,235
  • 8
  • 44
  • 53
72
votes
4 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';
71
votes
7 answers

Simple Conditional Routing in Reactjs

How to implement conditional routing i.e. if and only if some conditions satisfies, then routing should occur. 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…
Srikanth Gowda
  • 6,163
  • 7
  • 19
  • 34
66
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
  • 6,201
  • 8
  • 39
  • 67
64
votes
7 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,307
  • 3
  • 17
  • 29
63
votes
6 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
  • 1,187
  • 4
  • 13
  • 30
63
votes
11 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
  • 2,141
  • 3
  • 19
  • 35
62
votes
8 answers

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

See my code below. I'm trying to add this button that goes back to the previous page using react-router-dom but I get the below error, and also all the components on my website disappear. Error: useNavigate() may be used only in the context of a…
kid
  • 771
  • 1
  • 4
  • 12
61
votes
7 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…
Radu Sturzu
  • 613
  • 1
  • 5
  • 5
60
votes
17 answers

Protected route with react router v6

What is correct way to write a ProtectedRoute with new version 6 of react-router? I wrote this one, but it's not a route const PrivateRoute = ({ component: Component, ...props }) => { if (!Component) return null; return…
Victor
  • 745
  • 2
  • 7
  • 16
1
2
3
…
99 100