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
17
votes
3 answers

Authenticate async with react-router-v4

I have this PrivateRoute component (from the docs): const PrivateRoute = ({ component: Component, ...rest }) => ( ( isAuthenticated ? ( ) : (
tommyd456
  • 10,443
  • 26
  • 89
  • 163
17
votes
1 answer

Where's hashHistory in React Router v4?

I'm trying to use a router for my React application. I tried something I'd been using a while back, but can't seem to get it going. Has hashHistory been removed/reformatted in React Router v4?
Petter Östergren
  • 973
  • 4
  • 14
  • 27
17
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
  • 35,851
  • 46
  • 106
  • 159
16
votes
4 answers

Testing redirect after submit with React Testing Library

I'm trying to test a login component. Specifically that it redirects on a successful login. It works fine when testing it manually. But in my test it never does the redirect and it can therefor not find the "Logout" link: test('successfully logs the…
dan-klasson
  • 13,734
  • 14
  • 63
  • 101
16
votes
1 answer

Difference between location.pathname and match.url in react-router-dom?

What's the difference between props.location.pathname and props.match.url in react-router-dom? From their DOCS: https://reacttraining.com/react-router/web/api/location match.url (string) The matched portion of the URL. Useful for building nested…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
16
votes
3 answers

React-Router - Route re-rendering component on route change

Please read this properly before marking as duplicate, I assure you I've read and tried everything everyone suggests about this issue on stackoverflow and github. I have a route within my app rendered as below;
James Morrison
  • 1,954
  • 2
  • 21
  • 48
16
votes
3 answers

React router v4 redirect when no match

I'm new to react-router (and client side routing in general) so I might be thinking about this all wrong. Sorry in advance if that is the case... Basically just want to implement 3 simple rules: if no user, redirect to '/login' else if route…
Egor
  • 764
  • 2
  • 6
  • 11
16
votes
1 answer

React Router V4 protected private route with Redux-persist and React-snapshot

I'm implementing private route like so using React Router Route Component: function PrivateRoute({component: Component, authed, emailVerified, ...rest}) { return ( authed === true …
jasan
  • 11,475
  • 22
  • 57
  • 97
16
votes
1 answer

React Router 4 Match returns undefined

I'm using react router 4 and I'm having trouble accessing the id from a url using params. I've followed the react router 4 documentation however when I console.log match.params.id it returns Cannot read property 'params' of undefined. The URL…
bp123
  • 3,217
  • 8
  • 35
  • 74
16
votes
1 answer

Pass props through a higher order component from a Route

I have a problem with my Higher Order Component. I am trying to pass props from a component down a route (React Router v4). The components specified in the routes are wrapped by a HOC, but the props that I pass never reaches the…
Erik Hellman
  • 269
  • 1
  • 2
  • 11
15
votes
6 answers

React history.push() not rendering new component

I have a React.js project with a simple sign in function. After the user is authorized, I call history.push method which changes the link in the address bar but does not render the new component. (I use BrowserRouter) My index.js…
zilijonas
  • 3,285
  • 3
  • 26
  • 49
15
votes
2 answers

React Router - are nested components an anti-pattern?

From React Router's docs: All children of a should be or elements. Only the first child to match the current location will be rendered. Nonetheless, nested statements are allowed. I use the pattern to break up…
cheshireoctopus
  • 1,670
  • 1
  • 22
  • 31
15
votes
1 answer

React Route Component handle all "/" routes EXCEPT for "/login"

Dashboard component renders too, while I am entering /login. I need to omit Dashboard component while in Login. Exact attribute does not fit because Dashboard has nested paths like /dashboard/users, /dashboard/settings
Firanolfind
  • 1,559
  • 2
  • 17
  • 36
15
votes
3 answers

Within mapStateToProps, how to obtain a react-router param?

I have the following URL: http://localhost:4400/skills/3 In my react component I then have: constructor(props) { super(props); this.state = { skill_id: props.match.params.skill_id }; } .... const mapStateToProps = (state, ownProps) =>…
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
15
votes
7 answers

Create own react route class in typescript

I found this (reacttraining.com) site, which explains react-router with some examples. But I am not be able to do this with a typescript class. What I want to do is extend the Route class to build my own one. Right now I want to implement it in…
CordlessWool
  • 1,388
  • 4
  • 17
  • 35
1 2 3
…
99 100