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
13
votes
2 answers

Link tag inside BrowserRouter changes only the URL, but doesn't render the component

I am building a Netflix clone application, and I am using react-router-dom v5 to switch between different pages. However, when I click the Link tag in Navbar.jsx, the URL changes, but the corresponding component doesn't render. I have consulted…
Ankit_M
  • 276
  • 1
  • 3
  • 15
13
votes
2 answers

React Router 6 and Typescript - index attribute Type 'true' is not assignable to type 'false | undefined'.?

I'm trying to create an index route for one of my child routes in it's parent route but I keep on getting and error which says Type 'true' is not assignable to type 'false | undefined'. How do I fix it?
Moro Owusu Afriyie
  • 448
  • 4
  • 18
13
votes
6 answers

How to scroll to top on route change with react router dom v6?

How to scroll to top on route change with react router dom v6? I have tried this, react-router scroll to top on every transition, which was my solution to make my page scroll to top on route change when I use react-router-dom v5. Now, I am using…
jethro-dev
  • 249
  • 1
  • 5
  • 12
13
votes
5 answers

Render multiple elements in React Router v6.+

I need the answer to this question: Render multiple components in React Router but for the newer version of react-router-dom (I'm using v6.0.2) the older version of router-dom would work like this:
…
martinek
  • 151
  • 1
  • 1
  • 8
13
votes
3 answers

"Cannot read properties of undefined (reading 'pathname')" when testing pages in the v6 React Router

When testing components with s, for example in my answer to Recommended approach for route-based tests within routes of react-router, I often use the following pattern to get access to the current location for testing purposes: const…
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
13
votes
2 answers

React router 6, useNavigate how to get pathname

I am trying to understand how to use react router 6 and useNavigate but can't figure out how to get the current pathname. Using useHistory I could use history.location.pathname to get the current url. But how do I do the same using…
Burton
  • 407
  • 1
  • 6
  • 19
13
votes
3 answers

How can I change the color of a Link in React with Material-UI?

I'm not able to change the color of a Link inside a Button. When I apply the secondary color to the Button, it doesn't take effect. In other components it does work this way. …
Nadine
  • 357
  • 1
  • 5
  • 16
13
votes
1 answer

Using styled components "as" prop with typescript

I'm currently building a pattern library in which I've built a Button component using React and styled-components. Based on the Button component, I want all my Links component to look exactly the same and receive exactly the same props. For that…
Alejandro Garcia Anglada
  • 2,373
  • 1
  • 25
  • 41
13
votes
6 answers

How do I send custom data in react-router goBack method like push and replace methods?

I am using react-router-dom v4 and able to send custom data to the new screen using push(path, state) and replace(path, state) methods in "props.history.location" I want to send the data back to the previous screen but could not achieve using go(n)…
Ram Babu
  • 2,692
  • 3
  • 23
  • 28
13
votes
1 answer

Login Page Separated From Single-page Application (SPA) in ReactJS

I am developing a single-page application (SPA) in ReactJS, and I would like to know how can I have the Login page in a separate page. I am using create-react-app as a base for my application, and I am currently defining the template for my SPA in…
Julia
  • 509
  • 1
  • 7
  • 19
13
votes
1 answer

React Router DOM — How to include a navigation bar on every page?

I have this code in my App.js component: render() { return (
…
Abdullah Hamzic
  • 439
  • 2
  • 7
  • 17
13
votes
3 answers

React Router 4.x - PrivateRoute not working after connecting to Redux

PrivateRoute available in Example https://reacttraining.com/react-router/web/example/auth-workflow is not working after connecting with Redux. My PrivateRoute look almost same to the original version but only connected to Redux and used it instead…
Premchandra Singh
  • 14,156
  • 4
  • 31
  • 37
12
votes
2 answers

React Router v6 useRouteMatch equivalent

When using React Router v5, it was possible to get the path (pattern) for that route using useRouteMatch. const { path } = useRouteMatch(); React Router v6 offers a similar hook, useMatch; however this expects to receive the pattern you want to…
Kevin Farrugia
  • 6,431
  • 4
  • 38
  • 61
12
votes
5 answers

Error: Absolute route path "/" nested under path "/app" is not valid

I suddenly get this error and not sure why.I did not change the "react-router-dom": "^6.0.0-beta.4" version. But the "react-dom": "^16.8.4"" had changed to "react-dom": "^16.13.1", Dunno if that had anything to do with I don't know but the useRoutes…
Kid
  • 1,869
  • 3
  • 19
  • 48
12
votes
3 answers

React route params with default value

I am using react functional component with react router v5 . I am using useParam function to fetch a param. How can I set default value of the param when it is not available or undefined. My router code // .... // ....
Malay M
  • 1,659
  • 1
  • 14
  • 22
1 2 3
…
99 100