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

3682 questions
9
votes
1 answer

React Redux and react-router-dom

I am learning Redux, and with the new changes in react-router-dom I am a bit confused. I have these files: Index.js import React from 'react'; import { Provider } from 'react-redux'; import ReactDOM from 'react-dom'; // import { AppContainer }…
Kaiser Soze
  • 852
  • 2
  • 9
  • 21
9
votes
1 answer

Access to router directly by typing it's address on the address bar in react-router

There is two "main" way to use react-router (V4); The first way is using hash router which you can access directly to an address by typing it on browser's address bar but you must add a # to URL, another way is using BrowserRouter which has a pretty…
fue
  • 121
  • 2
  • 5
8
votes
1 answer

DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL

In react app getting below error when opening cached version of webpage on google. DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://projecturl' cannot be created in a document with origin…
Alwaysalearner
  • 3,137
  • 9
  • 45
  • 85
8
votes
1 answer

In Typescript, what is type PoorMansUnknown = {} | null | undefined and how would you deal with it?

Can someone please help me understand the meaning of the following type declaration... type PoorMansUnknown = {} | null | undefined; It is a TypeScript declaration and I have come across it in the context of the history package. I have searched…
Danoz
  • 675
  • 6
  • 19
8
votes
3 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
  • 207
  • 1
  • 3
  • 10
8
votes
1 answer

Remove event listener manually react hooks

I have a scroll event listener and I want to remove it based on page URL, how can I handle it using in a hook component? useEffect(() => { function handleScrollEvent() { if (window.scrollY > 100) { setHeaderIsVisible(true); …
Hadi Ranjbar
  • 1,252
  • 3
  • 14
  • 30
8
votes
2 answers

static website hosted in s3: pages return 404 after refresh

With this bucket policy: { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource":…
jamesdeath123
  • 3,196
  • 8
  • 39
  • 80
8
votes
1 answer

Unsubscribe from event listener react hooks

In a class-based react component you could simply do; componentWillUnmount() { window.removeEventListener('resize', this.resizeHandler); } Although I am unsure how to do this in a Function Based Component with React Hooks? In my application, I…
mcclosa
  • 1,375
  • 17
  • 37
8
votes
6 answers

Proper way of handling conditional component render depending on route?

I searched a lot on the Web and SO, asked in reactiflux chat, but didn't found a clean and non-hack-looking way of rendering some component depending of route/path. Let's say I have the
which should be shown on some pages and should be…
flppv
  • 3,061
  • 3
  • 23
  • 41
8
votes
3 answers

ReactJS - Handle POST requests using react router dom

Is there a way to handle POST requests using the react-router-dom (npm) library? Why? The payment gateway will redirect the user, who successfully payed, back to the platform. I can use a GET or POST request to transfer data with the redirection…
Michiel
  • 1,131
  • 1
  • 11
  • 23
8
votes
3 answers

How to handle empty URL parameter in react router dom (4.xx)

I have route defined as below : It works fine. For example localhost:3000/result/cat page works. But when the user decided to remove the :searchTerm from the URL and opens just…
Jithesh Kt
  • 1,809
  • 4
  • 28
  • 45
8
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
  • 299
  • 5
  • 15
8
votes
1 answer

React+redux-form - redirect after submit

I am using react-router-dom v4 . How can I redirect to the page after form submit success? I followed that tutorial LINK . Then I created my own submit function : const submit=({email='',password=''})=>{ let error={}; let isError=false; …
Mateusz
  • 955
  • 2
  • 9
  • 23
7
votes
4 answers

How to dynamically use react routing

I have a application where I have two logins one for superAdmin and other for 'Admin'. I have several pages One which is common (home page) both users have excess to that. then I have several other pages which are some for admin and others are for…
manish thakur
  • 1
  • 3
  • 17
  • 50
7
votes
6 answers

Protected route with react router v6

What is correct way to write a ProtectedRoute with new version 6 of react-router? I wrote this one, but it's not a route const PrivateRoute = ({ component: Component, ...props }) => { if (!Component) return null; return…
Victor
  • 155
  • 2
  • 13
1 2 3
…
99 100