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
35
votes
6 answers

React Router work on reload, but not when clicking on a link

I have setup the React with react-router version 4. The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/categories), but the content don't get…
34
votes
4 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
  • 49,839
  • 95
  • 259
  • 394
33
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
  • 3,191
  • 5
  • 26
  • 50
33
votes
4 answers

How to navigate on path by button click in react router v4?

I have this paths in react-router-dom:
{/* app = home */}
everything is working fine,…
gpbaculio
  • 3,649
  • 7
  • 31
  • 67
33
votes
7 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
  • 1,216
  • 1
  • 8
  • 21
33
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
  • 331
  • 1
  • 3
  • 4
28
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…
Andre
  • 1,481
  • 1
  • 17
  • 38
25
votes
2 answers

how to use react-native-web and react-navigation together and access from web url

UPDATE: react-navigation web support is done. follow this: https://reactnavigation.org/docs/en/web-support.html ORIGIN: I try to share my code between react-native and web. when I try react-native-web, it works well. but there is only one question,…
25
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
  • 2,679
  • 9
  • 34
  • 75
24
votes
1 answer

Use history.push in action creator with react-router-v4?

The only working method that I found to work this out without using react-router-redux to route from action creator async action completion is by passing the history prop from the component to action creator and doing:…
24
votes
7 answers

How do I create react-router v4 breadcrumbs?

How do I create react-router v4 breadcrumbs? I tried asking this question on the react-router V4 website via an issue ticket. They just said to see the recursive paths example. I really want to create it in semantic-ui-react
Monty
  • 321
  • 1
  • 2
  • 8
23
votes
2 answers

React-router : how to pass "match" object into a component declared as an ES6 class?

I'am new to react-router (v4) and I was following the tutorial until this little problem : This code works quite well class App extends Component { render() { return (
21
votes
3 answers

this.props.history.push not re-rendering react component

In my component I use this.props.history.push(pathname:.. search:..) to rerender the component and fetch new data form a third party service. When I first call the page it renders. But when I call history push inside the component the URL updates…
shotofcode
  • 447
  • 1
  • 5
  • 12
21
votes
2 answers

React Router v4 Redirecting on form submit

Brand new to react, Attempting to redirect to a "homepage" after clicking submit on a "login" page. Tried to follow the react router tutorial. When I click the submit button on the form and console log the state and fakeAuth.isAuthenticated, they…
Vincent Nguyen
  • 1,175
  • 3
  • 14
  • 29
21
votes
2 answers

React router v4 not working with Redux

Developing a React application using React router v4. All worked well until I introduced Redux in my app. Since then on click of links to change route the browser url changes but the component corresponding to the route is not getting loaded. It…
JS dev
  • 8,456
  • 12
  • 68
  • 111