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
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
  • 13,868
  • 4
  • 25
  • 37
12
votes
1 answer

Passing react-router-dom's Link into external library

I'm rendering components from my external (node_modules) pattern library. In my main App, I'm passing my Link instance from react-router-dom into my external libraries' component like so: import { Link } from 'react-router-dom'; import { Heading }…
djmcr
  • 1,490
  • 3
  • 24
  • 54
12
votes
3 answers

How to send params in useHistory of React Router Dom?

I am using React Router hooks for navigation useHistory. Navigate : history.push("/home", { update: true }); In home : I am trying to get params let {update} = useParams(); But update is always undefined. Whats wrong with this code. Any…
Kais
  • 1,544
  • 3
  • 18
  • 30
12
votes
2 answers

react-router-dom: Invalid hook call, Hooks can only be called inside of the body of a function component

I try to nest a route: I have a catalog of products in a Catalog component, which matches with url "backoffice/catalog". I want to route to Edition component if the url matches with "backoffice/catalog/edit", but I need the Edition component to be a…
Janus
  • 417
  • 2
  • 4
  • 14
12
votes
3 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
  • 1,768
  • 1
  • 14
  • 21
12
votes
1 answer

Difference between location.pathname and match.url in react-router-dom?

What's the difference between props.location.pathname and props.match.url in react-router-dom? From their DOCS: https://reacttraining.com/react-router/web/api/location match.url (string) The matched portion of the URL. Useful for building nested…
cbdeveloper
  • 14,014
  • 11
  • 57
  • 145
12
votes
2 answers

React-router-dom v4 nested routes not working

In reference to the unresolved question (as a final conclusion) Multiple Nested Routes in react-router-dom v4 How to nest routes in React Router v4? I am also getting the same issue. https://reacttraining.com/react-router/web/guides/quick-start…
Masood
  • 145
  • 2
  • 6
11
votes
2 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
  • 3,699
  • 13
  • 71
  • 194
11
votes
2 answers

issue with types when using "withRouter" and Typescript

I'm trying to get some more deep knowledge and practice into React+Typescript, and I've come across this typing error when using withRouter from react-router-dom. My code snippet is very simple, and I've tried finding out people with the same…
P.Gracia
  • 129
  • 1
  • 6
11
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,177
  • 1
  • 20
  • 39
11
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
  • 489
  • 5
  • 18
11
votes
3 answers

react-router-dom TypeScript TS2322: Type 'typeof Index' is not assignable to type

Im getting quite a few of the same TypeScritp error in my main React component using react-router-dom. All of the child components are returning errors: error TS2322: Type 'typeof NotFound' is not assignable to type 'StatelessComponent
Vinnie James
  • 4,816
  • 4
  • 33
  • 47
10
votes
1 answer

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
  • 422
  • 4
  • 14
10
votes
1 answer

React-Router: Why is the useHistory undefined in react?

I have this. It is exactly the same as it says in the documentation. I think the react-router-dom module is fine because in other components the BrowserRouter, Router and Link work for me import { useHistory } from "react-router-dom" import React…
MiguelParkour
  • 111
  • 1
  • 4
10
votes
6 answers

Attempted import error: 'useRouteMatch' is not exported from 'react-router-dom'

I have this error when I try to import useRouteMatch from react-router-dom module, I have this error : Attempted import error: 'useRouteMatch' is not exported from 'react-router-dom'. do I have a wrong version of the react-router-dom module ?…
Janus
  • 417
  • 2
  • 4
  • 14
1 2 3
…
99 100