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

Usage of exact and strict props

I am working with React-Router in React-JS: The is an built in component and have two different props: exact and strict Problem The documentation does not clearly defines the differences in between the exact and strict . Kindly help me. The…
Ishmal Ijaz
  • 3,017
  • 3
  • 8
  • 16
21
votes
7 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
  • 1,836
  • 5
  • 22
  • 34
20
votes
4 answers

React Router v4 - Keep scrolling position when switching components

I have two s created with react-router. /cards -> List of cards game /cards/1 -> Detail of card game #1 When the user clicks on the "Return to list", I want to scroll the user where he was on the list. How can I do this?
Sancho
  • 981
  • 1
  • 15
  • 39
19
votes
1 answer

What's the Difference between the React Router v4 Router Types?

I have tried to learn some React basics on YouTube and from the official docs and I encountered multiple different Routers in only two videos. Sadly, the instructor did not explain anything at all and I'm even more confused than I was before. dr: I…
17
votes
1 answer

Reactjs - `component` vs `render` in Route

I have two doubts regarding usage of Route from react-router-dom(v4.3.1): When do we use component vs render in Route:
Sreekar Mouli
  • 957
  • 3
  • 16
  • 42
17
votes
6 answers

How to get params in component in react router dom v4?

I have this code: the filter param or '' on the root is suppose to be on App components' props base on the previous react router versions? This is my code on my…
17
votes
3 answers

React Router v4 renders multiple routes

I'm creating an SPA and I'm trying to setup Routing in the application using the react-router-dom package version 4.1.1. My Route Definition is below:
Complexity
  • 5,148
  • 3
  • 28
  • 76
15
votes
3 answers

How to add react-router per each Material-UI TableRow?

How to add link per TableRow in .map? *my error is validateDOMNesting(...): cannot appear as a child of "< a >" im using react router react-router-dom how to add link in every loop of .map in Table TableRow? import React, { Fragment } from…
15
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?
14
votes
2 answers

How to solve prop spreading is forbidden in custom route component?

How to solve prop spreading is forbidden in custom route component? eslint: prop spreading is forbidden on line 3 and 6 const PrivateRoute = ({component: Component, ...rest}) => ( ( …
Almaz Kaliev
  • 169
  • 1
  • 1
  • 8
14
votes
3 answers

PrivateRoute not working in reactjs react-router-dom

I am completely stuck when integrating PrivateRoute HOC in my react.js project. Here is my route file import React, { Component } from "react"; import { Route, Redirect, Switch, BrowserRouter as Router } from 'react-router-dom'; import Dashboard…
Profer
  • 1,463
  • 3
  • 21
  • 53
14
votes
1 answer

React Router - are nested components an anti-pattern?

From React Router's docs: All children of a should be or elements. Only the first child to match the current location will be rendered. Nonetheless, nested statements are allowed. I use the pattern to break up…
cheshireoctopus
  • 1,538
  • 1
  • 20
  • 27
14
votes
2 answers

Is there a way to expose route params outside component?

If I have something like this: My routes config looks like: export default [{ path: '/', exact: true, main: Home }, { path: '/:someId', exact: true, main:…
13
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
  • 630
  • 7
  • 22
13
votes
6 answers

How to detect route changes with react-router v4?

I need to detect if a route change has occurred so that I can change a variable to true. I've looked through these questions: 1. https://github.com/ReactTraining/react-router/issues/3554 2. How to listen to route changes in react router v4? 3.…
HunterLiu
  • 591
  • 3
  • 5
  • 18