Stack Overflow
Stack Overflow

Questions tagged [react-router-v4]

React Router - A complete routing library for React inspired by Ember's routing system

Introduction

React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.

Docs

Related tags

1983 questions
20
votes
3 answers

React Router with React 16.6 Suspense "Invalid prop `component` of type `object` supplied to `Route`, expected `function`."

I'm using the latest version (16.6) of React with react-router (4.3.1) and trying to use code splitting using React.Suspense. Although my routing is working and the code did split into several bundles loaded dynamically, I'm getting a warning about…
ronnyrr
  • 1,202
  • 2
  • 21
  • 40
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
20
votes
1 answer

Passing custom props to router component in react-router v4

I'm using React Router to create a multi page app. My main component is and it renders all of the routing to to child components. I'm trying to pass props via the route, and based on some research I did, the most common way for child…
Mark Romano
  • 661
  • 3
  • 9
  • 23
20
votes
6 answers

How to nest routes in React Router v4?

Is there a way to nest routes in React Router v4? This works:
This does not:
Raphael Rafatpanah
  • 15,663
  • 19
  • 73
  • 136
19
votes
4 answers

Prevent routing in React when user manually changes url in browser tab

I am stuck in a issue that happens when user manually changes the route in browser tab and presses enter. This forces my react router to navigate to the state entered by user. I want to prevent this and allow routing only through the flow I have…
JS dev
  • 8,456
  • 12
  • 68
  • 111
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,379
  • 2
  • 20
  • 45
19
votes
5 answers

Moving from react router 3.x to 4.x

How can I move to using https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js from using https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js? Example using 3.x below. HTML
rich
  • 17,280
  • 9
  • 58
  • 96
18
votes
2 answers

How does one access state on a nested React component wrapped by an HOC?

I'm using Enzyme, and we can actually use the example component given in the docs as a foundation for my question. Let's assume this component uses a component from ReactRouter and thus we need to wrap it in a for…
indiesquidge
  • 761
  • 2
  • 8
  • 14
18
votes
3 answers

React router 4 history.listen never fires

Switched to router v4 and history v4.5.1 and now history listener not working import createBrowserHistory from 'history/createBrowserHistory' const history = createBrowserHistory() history.listen((location, action) => { console.log(action,…
ilyo
  • 33,469
  • 40
  • 99
  • 145
17
votes
8 answers

How to use react-router 4.0 to refresh current route? not reload the whole page

'react-router-dom' has refresh function here, but I don't know how to call this method, also their well formatted document doesn't bother to explain this. window.location.reload() doesn't work for me, because it wipes out the app store as well. I…
Nicolas S.Xu
  • 10,813
  • 27
  • 63
  • 112
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…
gpbaculio
  • 3,649
  • 7
  • 31
  • 67
16
votes
2 answers

How to fix nextCreate is not a function setting up useMemo setting up authentication react router and hooks

I'm trying to use context to create a authentication provider for my app. Following a guide for Authentication with react router and react hooks. It's using a memo to fetch authentication if auth changes. This is the guide i was following…
Logan Klein
  • 193
  • 1
  • 4
16
votes
3 answers

React Hooks with React Router v4 - how do I redirect to another route?

I have a simple react hooks application - a list of Todos - with react router v4 On the List of Todos, when a Todo is clicked I need to: Dispatch the current todo in context Redirect to another route (from /todos to /todos/:id) In the previous…
WD1
  • 163
  • 1
  • 1
  • 4
16
votes
2 answers

difference between React router.push and router.replace?

What is the difference between React router.push and router.replace?
siluveru kiran kumar
  • 415
  • 1
  • 5
  • 13
16
votes
3 answers

Authenticate async with react-router-v4

I have this PrivateRoute component (from the docs): const PrivateRoute = ({ component: Component, ...rest }) => ( ( isAuthenticated ? ( ) : (
tommyd456
  • 9,203
  • 21
  • 74
  • 144
1 2 3
…
99 100