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
58
votes
7 answers

react-router-dom with TypeScript

I'm trying to use react router with TypeScript. However, I have certain problems using withRouter function. On the last line, I'm getting pretty weird error: Argument of type 'ComponentClass<{}>' is not assignable to parameter of type…
56
votes
11 answers

Is there a way to modify the page title with React-Router v4+?

I'm looking for a way to modify the page title when React-Router v4+ changes locations. I used to listen for a location change action in Redux and check that route against a metaData object. When using React-Router v4+, there's no fixed routes list.…
52
votes
8 answers

Programmatically Navigate using react-router

I am developing an application in which I check if the user is not loggedIn. I have to display the login form, else dispatch an action that would change the route and load other component. Here is my code: render() { if (isLoggedIn) { //…
Gaurav Mehta
  • 573
  • 1
  • 4
  • 9
51
votes
2 answers

React router Switch behavior

(react-router-dom version: 4.1.1) I have working routes set up, but I'm a bit confused about why the was necessary: index.js import React from 'react'; import { HashRouter, Route, Switch } from 'react-router-dom'; import App from…
Jess
  • 1,337
  • 3
  • 19
  • 30
51
votes
11 answers

Material-UI's Tabs integration with react router 4?

The new react-router syntax uses the Link component to move around the routes. But how could this be integrated with material-ui? In my case, I'm using tabs as the main navigation system, So in theory I should have something like this: const TabLink…
Daniel Ramos
  • 1,399
  • 2
  • 13
  • 20
50
votes
5 answers

Using React IndexRoute in react-router v4

I'm learning React myself with online tutorial. So this is a basic example about using React Router:
Quoc-Hao Tran
  • 1,012
  • 2
  • 11
  • 18
50
votes
6 answers

How can I style active Link in react-router v4?

In react-router v3 we had activeStyle and activeClassName to style active Link we could do something like this
{tags.map(t =>
47
votes
6 answers

Simple Conditional Routing in Reactjs

How to make conditional Routing, if and only if some conditions satisfies then only routing should happen. for example, if and only if the user enters the correct credentials login should be successful and the user should be able to see the welcome…
46
votes
4 answers

React router 4 does not update view on link, but does on refresh

I am using the following simple nav code
ilyo
  • 33,469
  • 40
  • 99
  • 145
45
votes
4 answers

How to Access History Object Outside of a React Component

First of all, I am pretty familiar with the withRouter HoC, however, in this case, it doesn't help because I do not want to access the history object in a component. I am trying to achieve a mechanism that will redirect the user to the login page if…
Dragos Rizescu
  • 3,060
  • 5
  • 27
  • 41
45
votes
4 answers

Changing the URL in react-router v4 without using Redirect or Link

I'm using react-router v4 and material-ui in my React app. I was wondering how to change the URL once there is a click on a GridTile within GridList. My initial idea was to use a handler for onTouchTap. However, the only way I can see to redirect is…
Alex
  • 831
  • 1
  • 9
  • 14
42
votes
3 answers

react-router Redirect vs history.push

I was reading react-router-redux examples and I confused, what is the difference beetween: import { Redirect } from 'react-router-dom' ... and import { push } from 'react-router-redux' ... push('/login')
37
votes
7 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,794
  • 6
  • 21
  • 43
36
votes
4 answers

using same component for different route path in react-router v4

I am trying to have separate routes but same component for add/edit forms in my react app like the below:
beNerd
  • 3,088
  • 5
  • 43
  • 84
35
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
  • 3,649
  • 7
  • 31
  • 67