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
36
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
  • 9,140
  • 15
  • 46
  • 68
35
votes
14 answers

React js: Error: useLocation() may be used only in the context of a component

im using react router v6 and i every time i use initializing for authentication in my main file it shows this error. i cant find a solution in the internet for it. i want to render some routes only when there is a user but now it doesnt render…
Kevin Rump
  • 391
  • 1
  • 3
  • 9
35
votes
6 answers

react-router v6: Navigate to a URL with searchParams

I'm using react-router v6. I want to navigate to a URL that has searchParams, but I'm not seeing a way to do this out of the box. useNavigate allows me to navigate to a URL by passing in a string. useSearchParams allows me to set searchParams on the…
caseyjhol
  • 3,090
  • 2
  • 19
  • 23
34
votes
4 answers

react jest mock useNavigate()

"react-router-dom": "^6.0.0-alpha.5", I have tried nearly everything. I just want to mock this navigate() call from the useNavigate() hook. that's it. Simple. Nothing working. No, i do not want to use Link. useNavigate is used programmatically in…
Zac
  • 1,719
  • 3
  • 27
  • 48
34
votes
2 answers

History.push a link to a new tab with react router

I need to open a link to a new tab after doing some logic. I have a button like this: with the handleSubmit() being: const history = useHistory(); const handleSubmit = () => { …
Yassine Bridi
  • 836
  • 2
  • 10
  • 20
33
votes
2 answers

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
  • 7,369
  • 8
  • 45
  • 72
32
votes
6 answers

How to properly use useHistory () from react-router-dom?

How to use useHistory() correctly? I can't make the transition from one react component to another. According to the instructions from the React documentation and also here on Stack Overflow, I cannot make the transition from App.js to…
Petr Fořt Fru-Fru
  • 858
  • 2
  • 8
  • 23
32
votes
4 answers

How to resolve eslint error: "prop spreading is forbidden" in a custom route component?

How can I resolve the eslint error: "prop spreading is forbidden" in a custom route component? This error occurs on lines 3 and 6 below: const PrivateRoute = ({component: Component, ...rest}) => ( ( …
Almaz Kaliev
  • 468
  • 1
  • 4
  • 10
31
votes
7 answers

React TypeScript: Correct type for useLocation() from react-router-dom

I'm struggling to find the right type for this situation. This is a simplified version of redirecting after login. The following produces a compiler error: Property 'from' does not exist on type '{} | { from: { pathname: string; }; }'. Adding as…
Jim Greer
  • 421
  • 1
  • 4
  • 5
30
votes
7 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
  • 1,288
  • 2
  • 25
  • 50
29
votes
12 answers

You cannot render a inside another . You should never have more than one in your app

import { BrowserRouter, Routes, Route } from "react-router-dom"; //Layouts import HomeLayoutRoute from "./components/layouts/HomeLayout"; //components import Home from './components/Home'; //import Dashboard from './components/Dash'; //…
Nuwan Chamikara
  • 433
  • 1
  • 5
  • 17
29
votes
2 answers

react-router-dom get id from route with custom components and extra path

I have an app that uses a react-router-config and uses a wrapper component to redirect unauthenticated users. I have some functionality that requires the use of the route /tasks/:id but I am unable to access the :id value to perform the necessary…
an00b
  • 442
  • 1
  • 4
  • 8
29
votes
5 answers

React useEffect is not triggering on route change

I expect that console.log('Refresh') runs every time the route changes (switching from Component1 to Component2). But it's only triggering on first render. Why? index.js: import React from 'react'; import ReactDOM from 'react-dom'; import App from…
Erik Martín Jordán
  • 4,332
  • 3
  • 26
  • 36
28
votes
2 answers

Order of Provider and Router in React app

I'm making my React app a SPA and adding React Router 4 with react-router-dom to it. Currently, my entry point to my home component looks like this: render ( …
Sam
  • 26,817
  • 58
  • 206
  • 383
27
votes
2 answers

Can you use Material-UI Link with react-router-dom Link?

Given these two components: import Link from '@material-ui/core/Link'; import { Link } from 'react-router-dom'; Is there a way to get the style from Material-UI with the functionality of react-router-dom?
Marcelo Velasquez
  • 585
  • 1
  • 4
  • 12
1 2 3
…
99 100