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

How to Put Routerlink in IconButton in ReactJS

How can i put the routerlink in reactjs button? I tried these two below: the first one changes the color while the second one, i don't like it since it is reloading the page. FIRST …
Joseph
  • 7,042
  • 23
  • 83
  • 181
17
votes
3 answers

react-router-dom: Invalid hook call, Hooks can only be called inside of the body of a function component

I try to nest a route: I have a catalog of products in a Catalog component, which matches with url "backoffice/catalog". I want to route to Edition component if the url matches with "backoffice/catalog/edit", but I need the Edition component to be a…
Janus
  • 645
  • 2
  • 7
  • 18
17
votes
2 answers

issue with types when using "withRouter" and Typescript

I'm trying to get some more deep knowledge and practice into React+Typescript, and I've come across this typing error when using withRouter from react-router-dom. My code snippet is very simple, and I've tried finding out people with the same…
P.Gracia
  • 214
  • 1
  • 2
  • 9
17
votes
1 answer

Where's hashHistory in React Router v4?

I'm trying to use a router for my React application. I tried something I'd been using a while back, but can't seem to get it going. Has hashHistory been removed/reformatted in React Router v4?
Petter Östergren
  • 973
  • 4
  • 14
  • 27
16
votes
1 answer

How to get all query params using React-Router-DOM v6 `useSearchParams` without specifying the key?

I'm currently working on a React project with react-router-dom v6 and I want to get all of the query parameters. http://localhost:3000/users?page=5&pageSize=25 I want to get both page and pageSize. I know that we can use this code below to get…
Maulana Adam Sahid
  • 375
  • 2
  • 4
  • 12
16
votes
2 answers

Testing React Component with React Router V6

I understand that React Testing Library has an example of testing with react router, but I couldn't get it to work (I think because I am using react router V6). Basically, I need router testing because I have details component that uses useParams()…
cxgslegend
  • 317
  • 1
  • 3
  • 7
16
votes
2 answers

Alternative for Prompt in React Router V6

What is the alternative for Prompt in React Router V6, has it been deprecated, and also hooks like usePrompt, useBlocker are also not available.
Praveen Rao Chavan.G
  • 2,772
  • 3
  • 22
  • 33
16
votes
5 answers

How to use Private route in react-router-dom@v6

I want to use private route with react-router-dom v6, while i am trying to apply a condition for auth. In App.js }/> In a component .js
dntfury
  • 178
  • 1
  • 2
  • 9
16
votes
1 answer

Is there a way to apply a fade in/out transition with React suspense for the fallback component?

I have a react app using MUI and right now I've implemented suspense with a spinner which kicks in as the fallback component while the content is being loaded. I'd love to add a fade in/out transition to the fallback component since the change is…
guido732
  • 441
  • 1
  • 4
  • 10
16
votes
4 answers

How can I use history.push('path') in react router 5.1.2 in stateful component?

How can I use history.push('path') in react router 5.1.2 in stateful component (class component)? I found this, but it is a solution for a stateless component. import { useHistory } from "react-router-dom"; function App() { let history =…
Adam Gajdečka
  • 305
  • 1
  • 4
  • 13
16
votes
1 answer

Difference between location.pathname and match.url in react-router-dom?

What's the difference between props.location.pathname and props.match.url in react-router-dom? From their DOCS: https://reacttraining.com/react-router/web/api/location match.url (string) The matched portion of the URL. Useful for building nested…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
16
votes
4 answers

Navlink from react-router-dom Home always active

Nav works, home link is always active other links are OK. Adding as component, no props. HTML CSS .active{ background-color:#ff6a00; } JS import React, { Component } from 'react'; import './menu.css'; import { NavLink } from…
fuzzybear
  • 2,325
  • 3
  • 23
  • 45
15
votes
3 answers

Is it possible to use multiple outlets in a component in React-Router V6

I am using React Router v6 in an application. I have a layout page, which uses an outlet to then show the main content. I would also like to include a title section that changes based on which path has been matched, but I am unsure how to do…
DMAR
  • 200
  • 1
  • 1
  • 7
15
votes
1 answer

Framer Motion exit animation not firing on accordion with react-router-dom

So I've got this accordion-layout working with react-router-dom using a rather unconventional markup structure. Demo: https://codesandbox.io/s/falling-violet-kvqn2?file=/src/Case.js Shortened code for one accordion header:
umbriel
  • 723
  • 1
  • 7
  • 22
15
votes
5 answers

Lazy loaded React router routes loading anyway

I've been trying to lazy load routes in React using React.lazy and Suspense. But some components are loading regardless of the current route, exactly: Feed, Profile and Settings. Notice I don't actually want to lazy load Components like MenuAppBar…
Osama Adam
  • 381
  • 1
  • 3
  • 11
1 2 3
…
99 100