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

1988 questions
41
votes
10 answers

React Router v4 routes not working

I am relatively new to reacts and I'm trying to figure out how to get React router to work. I've got a super simple test app that looks like this: import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter as Router, Route,…
WebbH
  • 2,379
  • 1
  • 15
  • 26
41
votes
9 answers

React Router v4 Redirect not working

I have a route which redirects after checking a condition like this ( Store.isFirstTime ? : )}/> The url changes when the condition is true but the component is not…
mdanishs
  • 1,996
  • 8
  • 24
  • 50
39
votes
4 answers

React doesn't reload component data on route param change or query change

I have a "home" component with links, and when you click a link the product component is loaded with the product. I also have another component which is always visible, showing links to the "recently visited products". These links don't work when on…
Galivan
  • 4,842
  • 9
  • 44
  • 76
37
votes
2 answers

How to configure webpack dev server with react router dom v4?

This is the code of my webpack configuration: const compiler = webpack({ entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], module: { loaders: [ { exclude: /node_modules/, test: /\.js$/, …
gpbaculio
  • 5,693
  • 13
  • 60
  • 102
36
votes
5 answers

Using Jest to test a Link from react-router v4

I'm using jest to test a component with a from react-router v4. I get a warning that requires the context from a react-router component. How can I mock or provide a router context in my test? (Basically how do I resolve…
Don P
  • 60,113
  • 114
  • 300
  • 432
36
votes
3 answers

react-router 4 - Browser history needs a DOM

I am trying server side rendering using react-router 4. I am following the example provided here https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together As per the example on server we should use StaticRouter. When…
Saf
  • 361
  • 1
  • 3
  • 4
31
votes
2 answers

Advantages of dynamic vs static routing in React

I'm reading about static vs dynamic routing in React Router, and I'm struggling to identify the advantages of the latter (and why v4 chose to go with it). I can see the advantage of listing out all the routes for an application (static), as well as…
Voriki
  • 1,617
  • 2
  • 19
  • 43
30
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
  • 333
  • 1
  • 3
  • 4
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
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…
29
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
  • 699
  • 1
  • 10
  • 16
29
votes
5 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…
Peter
  • 10,492
  • 21
  • 82
  • 132
28
votes
15 answers

How to fix the white screen after build with create-react-app?

I used react-router-dom and I build my react-app. When I deploy it on the server, I get a blank page and the console is empty. My App.js is : import React, { Component } from 'react'; import { Route, Switch, BrowserRouter} from…
Ichrak Mansour
  • 1,850
  • 11
  • 34
  • 61
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
28
votes
4 answers

ReactJS Router V4 history.push not working

I have upgraded to React Router V4 and now struggling with the history.push method. I have an index.js file: import React from "react"; import { render } from "react-dom"; import { BrowserRouter, Route } from 'react-router-dom'; import…
ST80
  • 3,565
  • 16
  • 64
  • 124