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
20
votes
1 answer

How do you pass data when using the navigate function in react router v6

In v4 you would do a history.push('/whatever', { data }) Then the component tied to that route could read the data object by referencing the history.location.state Now with v6 that's changed to navigate('whatever') How do you pass data like before?
user1663658
  • 203
  • 1
  • 2
  • 5
20
votes
6 answers

React Redux state is lost at page refresh

in my react app I have 3 components. from the 1st component by a button, I use Link to go to the 2nd component. at the 2nd I create a state (redux store), manipulate it and when manipulation is finished by submitting button I redirect to the 3rd…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
20
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,682
  • 6
  • 41
  • 84
19
votes
7 answers

How to controling browser back button with react router dom v6?

I've been looking for this question and found it but they're using class components and react router dom v5 What i want is When user click browser back button I'll redirect them to home page
Esa Kurniawan
  • 527
  • 1
  • 2
  • 15
19
votes
4 answers

React Router with - Ant Design Sider: how to populate content section with components for relevant menu item

I'm trying to use AntD menu sider like a tab panel. I want to put components inside the content so that the content panel renders the related component when a menu item is clicked. How do I get this structure to take components as the content for…
Mel
  • 2,481
  • 26
  • 113
  • 273
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…
thelearner
  • 1,440
  • 3
  • 27
  • 58
19
votes
3 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:…
gl0gl0
  • 255
  • 3
  • 7
19
votes
3 answers

How to unmount a component on route change

I have a component at a given route, say app.com/cars/1 I have a sidebar with links to different cars, eg /cars/2, /cars/3 etc. The issue I'm having is when you change links, say go from cars/1 to cars/2, the component doesn't unmount, and I get…
Ben
  • 5,283
  • 9
  • 35
  • 44
18
votes
2 answers

How do I render components with different layouts/elements using react-router-dom v6

I am having trouble writing code to render a login page with no navbar and sidebar. I have come across some pages that ask similar questions but none seem to pertain to my current situation. How to hide navbar in login page in react router the…
RockoDaBoat
  • 183
  • 1
  • 1
  • 7
18
votes
3 answers

Why react router v6 useParams returns object with properties possibly 'undefined'?

Why react router v6 useParams returns object with properties possibly 'undefined'? In my code below, my IDE indicates const slug: string | undefined. const { slug } = useParams<"slug">(); It is because of the Params type definition: /** * The…
soliz
  • 735
  • 1
  • 7
  • 17
18
votes
8 answers

React-router-v6 access a url parameter

How can i access url parameter in my react component ? App.js } /> QuestionView.js class QuestionView extends React.Component { render() { const { questions, users } =…
ziad hany
  • 323
  • 1
  • 2
  • 8
18
votes
7 answers

How to create a protected route with react-router-dom?

How to create a protected route with react-router-dom and storing the response in localStorage, so that when a user tries to open next time they can view their details again. After login, they should redirect to the dashboard page. All functionality…
learner62
  • 520
  • 3
  • 10
  • 26
17
votes
4 answers

Difference between {Link} and {useNavigate} from 'react-router-dom'

Can anyone please explain the differences between {Link} and {useNavigate} from 'react-router-dom'? I am new to React and I see both {Link} and {useNavigate} are used to navigate through routes. So how are they different?
Tanh
  • 229
  • 1
  • 3
  • 6
17
votes
10 answers

React Router v6 useNavigate() doesn't navigate if replacing last element in path

I have a react component with the following function const handleNavigate = (clientId) => { console.log(clientId) navigate(`/dashboard/clients/${clientId}`) } The console.log() is showing the ID I want to append to use in…
Ax0n
  • 436
  • 1
  • 4
  • 15
17
votes
4 answers

How to navigate outside of react component using react router 6

Right now I have an History module, that let me use the history even outside of react component: import { createBrowserHistory } from 'history'; export default createBrowserHistory(); Then I use this history in App.jsx directly import { Router }…
bukso
  • 1,108
  • 12
  • 23
1 2 3
…
99 100