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
14
votes
4 answers

dynamic basename with BrowserRouter in react-router-dom

Please I have an issue building a multi-tenant SaaS solution. For every tenant, I want them to use a subdomain, so i can get the subdomain from the url, make a call to a REST api that returns data about that tenant. For example, the admin…
14
votes
3 answers

Add prefix to routes in React Router v4

I want to create a prefix for some paths in React Router v4, such as v1 in front of all my routes for version 1 of my app. Here's what I've tried:
Lakshay Jain
  • 446
  • 1
  • 3
  • 17
14
votes
3 answers

Passing props to a react component wrapped in withRouter() function

I am using React-Router v4 to navigate in my React app. The following is a component wrapped in the withRouter() function to make it able to change route on click: const LogoName = withRouter(({history, props}) => (

martin36
  • 2,253
  • 4
  • 18
  • 27

14
votes
1 answer

How to access history object outside in React Router v4

I have this following code: import { BrowserRouter as Router, Route, Link } from 'react-router-dom' const Routes = () => (
Tahnik Mustasin
  • 2,216
  • 2
  • 18
  • 21
13
votes
2 answers

Does order in which you wrap component with connect and withRouter matter

Which HOC will wrap the other. Does the order of wrapping with multiple HOCs matter in react or not? I have created multiple HOCs withSocket, withLoadingBar etc etc. Should I be worry about deep ugly nesting, Will it make an impact on performance of…
Amante Ninja
  • 647
  • 1
  • 6
  • 26
13
votes
6 answers

How do I send custom data in react-router goBack method like push and replace methods?

I am using react-router-dom v4 and able to send custom data to the new screen using push(path, state) and replace(path, state) methods in "props.history.location" I want to send the data back to the previous screen but could not achieve using go(n)…
Ram Babu
  • 2,692
  • 3
  • 23
  • 28
13
votes
1 answer

React Router 4 Regex paths - match doesn't find parameters

I'm trying to have regex pattern matching for react router 4, but unfortunately the this.props.match.params.id is not parsing the path correctly, and shows up as undefined. Examples of paths i want to be able to…
Cristian E.
  • 3,116
  • 7
  • 31
  • 61
13
votes
3 answers

React Router 4.x - PrivateRoute not working after connecting to Redux

PrivateRoute available in Example https://reacttraining.com/react-router/web/example/auth-workflow is not working after connecting with Redux. My PrivateRoute look almost same to the original version but only connected to Redux and used it instead…
13
votes
1 answer

Prompt is made when navigating within same route

For the use case when a page has an internal route, the prompt triggers even when navigating to an internal route where a prompt might not be necessary, see code example. Is there a way to disable the prompt when navigating to known safe…
Karagoth
  • 133
  • 1
  • 6
13
votes
3 answers

Is it possible to match the # part of a route in React Router 4

In my app, I'd like to match both the path and the hash to different components. For example: /pageA#modalB Would show PageA as the main page, with modalB over the top. I've tried the following, with many variations of the path property:
rje
  • 390
  • 2
  • 8
12
votes
4 answers

React Router Switch and exact path

I have read this document about react-router Switch I understand the definition about Switch and Route But still couldn't understand some points If I want to pick only one Route to render we use Switch like this
Paul Wang
  • 266
  • 1
  • 5
  • 14
12
votes
5 answers

React history.push allow user to open in new tab

Navigation between pages in my navbar is done using an onClick handler, rather than through hrefs. When doing this, I can't either middle click to open in a new tab or right click on the link and select open in new tab. I am using…
Cameron
  • 123
  • 1
  • 1
  • 4
12
votes
2 answers

Detect change in query param react-router-dom v4.x and re-render component

I am not really sure why its showing the default route once I did a query param change. Is there a better approach for this kind of issue? maybe I shouldn't be using query param? Open to get educated! Version "react": "^16.2.0", "react-dom":…
ey dee ey em
  • 7,991
  • 14
  • 65
  • 121
12
votes
2 answers

How to set a base url for react-router at the app level?

I have an app created with create-react-app that I want to install in a subdirectory on my website. The recommended way is to add process.env.PUBLIC_URL as the baseurl. ie:
Fabrice
  • 465
  • 1
  • 5
  • 17
12
votes
5 answers

React Router V4 - Warning: You tried to redirect to the same route you're currently on: "/home/dashboard"

I am getting this error tried different ways of routing still no luck. I have route config file i.e route.js const Root = ({ store }) => (
Arjita Mitra
  • 962
  • 2
  • 13
  • 36