Questions tagged [react-router-dom]

Use this tag for questions regarding DOM use and bindings of React Router v4, v5, and v6.

Introduction

React Router DOM is a package that contains all the DOM bindings for React Router. That includes things such as HashRouter and BrowserRouter which are specific to DOM use for the browser.


Docs

Related tags

3682 questions
1
vote
3 answers

React-router-dom v4 not rendering component on page load

So basically I have a navbar that switches between routes. When the page loads, it goes to /home by default but doesn't actually render the App component it's being given. I have to click on the button that brings you to /home in order to render…
1
vote
1 answer

Don't update the URL with Router and createBrowserHistory

I have an app which has three steps. You can navigate through each step from within the step components. There's also a back button which allows you to go back to the previous step. Currently when you click on a step it updates the url with the step…
user3486427
  • 361
  • 4
  • 14
1
vote
1 answer

"Unexpected token import" error in react-router-dom navlink dependency

When I am trying to test the default test of create-react-app. It gave me an error of ES6 compilation of ES6 import. I don't have any transpiler like babel in my code. Do I need to use .babelrc to transpile the code? FAIL src\app\App.test.js ●…
1
vote
1 answer

Why do react elements outside of Route re-render?

Open the sidebar example in official docs of react router. You can see that ul is rendered without Route since it is supposed to be there on screen irrespective of the url. Open React DevTools, check Highlight updates checkbox and click on any of…
1
vote
1 answer

ReactJs Router Duplicates itself when wrap it in component

I'm beginner in react, I'm using React 4, Redux and react-router-dom package for my router. I have an App.js file which connects Main with mapStateToProps & mapDispatchToProps //App.js const App = connect(mapStateToProps,…
1
vote
1 answer

React router is changing the URL but not loading the webpage properly

I am working on a React JS project, inside the project I am using React Router v4 to create a client-side route. This is the project live URL: https://gokhana.herokuapp.com/ On the homepage, a customer will search for the city/location (Indian…
1
vote
1 answer

How to send props to a component while using Route to load?

1) If I am importing a component, I can send props to component like this, Is there any way to send props to a component, If I am using Route? 2) Also,…
Yami Danchou
  • 205
  • 1
  • 2
  • 14
1
vote
1 answer

No react-router props being passed to my components

I am trying to build a simple react login app that navigates to a home page after logging in using this.props.history.push(). Unfortunately, in all of my components this.props is undefined. Here are the relevant portions: Root: import React from…
1
vote
1 answer

react-router-dom Link onclick get the path

I trying to handle the path when I click and I need using e.preventDefault(); for prevent animations inside the router so this is my code,basically I can not capture the location path for change the history target: import React from 'react';…
Leo1234562014
  • 76
  • 2
  • 12
1
vote
1 answer

Pass Props to this.props.children

I am new to React and I'm having an issue with passing custom props to this.props.children. I have tried React.cloneElement and I can see the prop when I do a console.log in the class I created it but it gets lost when I try to past it. I don't know…
1
vote
1 answer

Redirecting page using react-router-dom/ react-router v4 outside Component

I have React-Redux app, and should write a common error handler for all errors returned from the server. Currently for routing I m using 'react-router-dom'. I m using 'withRouter' inside components. But can I redirect inside actions? Or how can this…
user8125765
  • 179
  • 1
  • 1
  • 16
1
vote
1 answer

create-react-app with multiple entries

I have a create-react-app project where I am creating a front side for users and an admin side, and want this two sides to use the same code base and run on one time instead of building two separate apps and each will use a different theme and…
1
vote
1 answer

React Router: How to link back to scroll position of previous page

Imaging a page (vertical scrollable) full of thumbnails of images. When clicking on a thumbnail the image opens in fullscreen. It has a which leads back to the thumbnail page. Currently this leads to the top of the thumbnail page. How can…
ynotu.
  • 1,091
  • 1
  • 14
  • 35
1
vote
3 answers

ReactJs this.props.history.push() is not working

i'm new with Reactjs and for some reasons i'm working on a small application for learning purpose. I'm using react-router-dom to navigate between different components. The idea is when the user click to logout, the App Component should detect the…
1
vote
1 answer

Why cant I separate to a different module?

Goal I'm trying to extract the with its 's out to a different module. Problem The url is being changed to the new path, but the content doesn't (only when I refresh it changes). I'm trying to understand what am I…
ueeieiie
  • 1,014
  • 10
  • 33
1 2 3
99
100