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
27
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
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
  • 497
  • 1
  • 7
  • 12
25
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:…
25
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
  • 361
  • 1
  • 3
  • 8
24
votes
5 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,555
  • 4
  • 18
  • 33
24
votes
1 answer

@types/prop-types/index has no default export

I am trying to use https://github.com/facebook/prop-types So I have also installed the @types/prop-types for it. https://www.npmjs.com/package/@types/prop-types But I guess this error. [ts] Module '"/node_modules/@types/prop-types/index"' has no…
Jordan McDonald
  • 1,101
  • 3
  • 14
  • 24
24
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 (
23
votes
5 answers

React Router - How to replace dynamically parameters in a string

I have a set of dynamically parameters in the URL, ad example the user locale, that looks like that: /en/homepage In my router config JSON file, I have something like: /:locale/homepage Which is the best way in order to replace these parameters…
AnnamariaL
  • 251
  • 1
  • 2
  • 6
22
votes
6 answers

How to get params in component in react router dom v4?

I have this code: the filter param or '' on the root is suppose to be on App components' props base on the previous react router versions? This is my code on my…
gpbaculio
  • 5,693
  • 13
  • 60
  • 102
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…
Peter
  • 10,492
  • 21
  • 82
  • 132
21
votes
1 answer

Passing custom props to router component in react-router v4

I'm using React Router to create a multi page app. My main component is and it renders all of the routing to to child components. I'm trying to pass props via the route, and based on some research I did, the most common way for child…
Mark Romano
  • 701
  • 3
  • 12
  • 25
21
votes
6 answers

How to nest routes in React Router v4?

Is there a way to nest routes in React Router v4? This works:
This does not:
Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
20
votes
2 answers

Warning: You should not use and in the same route; will be ignored

Hello i try to protected route if is no auth but it is not work Warning: You should not use Route component and Route render in the same route; Route render will be ignored App.js import React, { Fragment, useEffect } from 'react'; import {…
HelloGello
  • 361
  • 1
  • 3
  • 11
20
votes
2 answers

Allow slashes in route parameter on React

I have a router like this: It works with this: http://localhost/blog/2017-05-20/test However, :folder can have slashes (sub-dir) and i want to parse all path at once in…
Dennis
  • 1,805
  • 3
  • 22
  • 41
20
votes
3 answers

React Router with React 16.6 Suspense "Invalid prop `component` of type `object` supplied to `Route`, expected `function`."

I'm using the latest version (16.6) of React with react-router (4.3.1) and trying to use code splitting using React.Suspense. Although my routing is working and the code did split into several bundles loaded dynamically, I'm getting a warning about…
ronnyrr
  • 1,481
  • 3
  • 26
  • 45