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

7372 questions
2
votes
1 answer

WebStorm use wrong @types definition file?

I'm using webstorm to write react page with react-router-dom@6. react-router-dom@6 has built-in index.d.ts and @types/react-router-dom does not have a version higher than 6. Normally, webstorm should use the built-in index.d.ts of react-router-dom.…
skyone
  • 21
  • 3
2
votes
2 answers

React router switch doesn't match on first load

I have the below swtich using react-router. When I open a new tab and go to any path it always redirects to /login. If I remove the bottom switch (with no path - the default), it works as expected. If I navigate to any path having already loaded the…
Laurence Summers
  • 201
  • 1
  • 3
  • 14
2
votes
3 answers

React Router not rendering anything

when using react-router-dom, I cannot render any of my components or anything. All it does is show a white screen, it doesn't add anything to my index.html template. There aren't any errors however it says that in index.js there are unused variables…
2
votes
2 answers

react-router-dom v6 for google analytics

So in a previous application for using Google Analytics i had this component for a this component would listen to the url change, and that would be passed to ReactGA so GA knew which page the users were on and looking at.…
Austin Howard
  • 780
  • 4
  • 10
  • 24
2
votes
1 answer

Come back to Calling Route with data

I'm pretty new to react router so I want to know whether the following scenario is possible or not. I have two Routes. Detail Route & Listing Route. From Detail page I have a button "Add" which is suppose to open the Listing Route and on that route…
user1097940
  • 283
  • 3
  • 12
2
votes
2 answers

No routes matched location "/cart" in router router dom v 6

When I console.log qty (in the code below), I see No routes matched location "/cart" (from browser console) instead of value of qty. In react-router-dom v5 everything works well by passing location as props to the component, but that isn't working…
C-Bizz
  • 624
  • 9
  • 25
2
votes
2 answers

How Can I refactor my App.js page routes in React ? What is the best practice for that?

My App.js looks so ugly with a lot of routes and show/hide Navbar component in some pages. What is a best practice to centralized routes and somehow refactor this show/hide Navbar? Any suggestions? I did some research, but can not determine which…
2
votes
1 answer

Error: [AdminRoute] is not a component. All component children of must be a or

I want authenticated routes if user is not logged in the page should not be accessible like if someone enters in the url localhost.../admin/dashboard he should not be able to navigate instead he should be taken to signin page if not logged in. I'm…
2
votes
1 answer

how to render same component in every route

import ... const App = () => { const [showModal, setShowModal] = useState(false); const toggleModalShow = () => { setShowModal(!showModal); }; return (
Umut Palabiyik
  • 313
  • 6
  • 16
2
votes
2 answers

Layout Route does not work as expected with react-router-dom@6

I am working with react-router-dom@6.2. When trying to wrap my elements with "DefaultLayout" element manually everything seems to be OK: } />
Sefi R
  • 110
  • 9
2
votes
2 answers

How do I make react router v6 load elements without having to manualy refresh the url?

When I send the user to a URL (in this case /login and /signup and then back to /) the elements on my page don't load automatically by entering the URL, I instead have to manually refresh in order for the content to load. This is my index.js which…
Azzpr
  • 31
  • 1
  • 5
2
votes
2 answers

Is it possible to use Template literal for Component name in React?

it may be weird, but I want to dynamically route in ReactJs. So, I tried using Template literal for generating the Component name, but its not working. Any idea how its done? or is it not allowed? { …
2
votes
1 answer

What's the correct way to render React components with different styles such as Navbar using React Router 6v?

I am having some issues with the following problem. The design brief contains 3 different pages. 2 has the same layout for the Navbar and Footer, but the third page has a different style for those components. I am using the latest react-router-dom…
Benji
  • 280
  • 3
  • 15
2
votes
2 answers

React JS how do you pass an array as a parameter using react-router-dom

I am trying to pass an array from / (Home) my /item (itemInfo) page This is the main App() where we route: function App() { return (
{/*Makes sure we are only on one route at a…
2
votes
1 answer

How to inherit context correctly when using yarn workspaces and react-router-dom v6?

I have a monorepo using yarn workspaces and lerna. The structure of my app is basically a 'hub' for importing other yarn packages, and what I'd like to be able to do is allow each package that is being imported to define their own Routes. This works…