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

1988 questions
71
votes
7 answers

Simple Conditional Routing in Reactjs

How to implement conditional routing i.e. if and only if some conditions satisfies, then routing should occur. 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…
Srikanth Gowda
  • 6,163
  • 7
  • 19
  • 34
66
votes
5 answers

Nested Routes in React Router v4

I'm trying to set up some nested routes to add a common layout. Check the code out:
…
Sean Gillespie
  • 761
  • 1
  • 5
  • 6
64
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…
Haris Bašić
  • 1,383
  • 2
  • 12
  • 21
60
votes
12 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
  • 2,115
  • 3
  • 18
  • 28
58
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')
tandav
  • 775
  • 2
  • 9
  • 14
57
votes
7 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,380
  • 5
  • 31
  • 42
56
votes
6 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
  • 5,693
  • 13
  • 60
  • 102
56
votes
7 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 =>
Ramtin Khalatbari
  • 569
  • 1
  • 4
  • 5
55
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,312
  • 3
  • 13
  • 20
55
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
  • 1,021
  • 3
  • 10
  • 16
54
votes
9 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
  • 603
  • 1
  • 6
  • 10
52
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,515
  • 3
  • 23
  • 32
48
votes
5 answers

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

I am using the following simple nav code
ilyo
  • 35,851
  • 46
  • 106
  • 159
43
votes
5 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,314
  • 6
  • 54
  • 92
41
votes
9 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…
Suthan Bala
  • 3,209
  • 5
  • 34
  • 59
1
2
3
…
99 100