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
2 answers

activeStyle does not exist on type 'IntrinsicAttributes

I am trying to use NavLink in react typescript project, however, it's getting an error. Property 'activeStyle' does not exist on type 'IntrinsicAttributes & NavLinkProps & RefAttributes'. import React from 'react' import { NavLink } from…
Mamunur Rashid
  • 1,095
  • 17
  • 28
2
votes
0 answers

My routing with React router dom, not working

I'm building a module federation/react aplication. I'm currently working on my container, and i've been setting up the environment for everything, including TS, now, when i try to create my routes, only the Home appear, but other routes don't. Let…
2
votes
1 answer

React Router (Version 6.0.2) makes page unresponsive ReactJS

When I use the new navigate function in ReactJS React Router DOM it makes the page unresponsive. I think there is an error in my code because when I add the navigate react-router-dom function to a button like () => navigate('home') it works. But,…
Poornaka
  • 180
  • 1
  • 13
2
votes
1 answer

converting react router to v6

I have an error message as so when trying to convert an existing app to use react-router v6: Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . here is my App…
Ben Shekhtman
  • 385
  • 5
  • 15
2
votes
1 answer

react router v6 won't switch to Home Page after Login Page: Warning: Can't perform a React state update on an unmounted component

Note: using firebase v9 On my webapp, I'm trying to have it so that after a successful login we redirect the user to the main page, and if it's unsuccessful we stay on the login page. I originally just tried using private router, but I believe the…
2
votes
2 answers

@types/react-router-dom gives errors when vite build

I am making a react app with vite and typescript. When I use "vite" for development, it works fine. But when I use "tsc && vite build", @types/react-router-dom and @types/react-router throws hundreds of errors, such…
genius
  • 73
  • 2
  • 9
2
votes
3 answers

React Router - on page refresh my images from parents disappear

I have an issue that, on refresh, some of the media disappear (bg image + logo). The backgroud image is inherited from HTML and the logo from the Navbar component. This link is on a category and is working fine on…
Chris
  • 55
  • 3
2
votes
2 answers

React scroll to top on render--the usual answer doesn't seem to be working

I have a React application with a left-side navigation bar and then pages being rendered on the right. When I view a page on the right and scroll down then use the navigation bar to go to another page, the new page is rendered with the same scroll…
smacdav
  • 405
  • 7
  • 16
2
votes
2 answers

How to go specific route without rendering some components in React?

I am using react-router-dom v6. I want my Login page to be rendered without the Sidebar and Topbar components. How to do it? function App() { return (
jethro-dev
  • 249
  • 1
  • 5
  • 12
2
votes
1 answer

Get params from outside of route component in React Router 6

I have created 2 components named Layout and Homepage. Then I have added Layout in return and implement 2 route inside it with Homepage component. Now am trying to get params by useParams hook inside Layout component while I am in the location of…
2
votes
2 answers

react-router 6 Navigate to using params

In v5 i have such structure { path: '/someurl/:id', exact: true, render: ({ params }) => (), } How to refactor this to V6?
Kybarg
  • 33
  • 1
  • 6
2
votes
1 answer

React Link - TypeError: Cannot read properties of undefined (reading 'pathname')

I want to add several infos sections in my front page, each having a button linking to an associated page on my website. Instead of writing a very large InfoSection component comprising all the sections (there will be 4 or 5), I tried to write only…
2
votes
1 answer

React does not recognize the `activeClassName`?

I don't know whats wrong, i've searched all internet for solution of this problem but i couldn't find any thing, please help! In my other app such code doing good, but whats the problem here i realy don't understand import { NavLink } from…
2
votes
2 answers

Redirect in React Router Dom v6

I need help after the update from React Router Dom to version 6. I have a code snippet for redirects after a user logged in which should work in version 5, but I think "Redirect" is depreceated. Now, I am looking for some replacement which…
Anne
  • 121
  • 1
  • 7
2
votes
1 answer

How to solve this problem ? PrivateRoute with React Router v6

PrivateRoute.js import React from 'react'; import { Route, Navigate } from 'react-router'; const PrivateRoute = ({component:Component, ...rest}) => { return { const token =…
ShewaniPerera
  • 47
  • 1
  • 8