Category "react-router"

How to update location.state in react-router v6?

I'm using react-router-dom v6. When using useNavigate like this: let navigate = useNavigate(); navigate("/", {state: state}); I can access it by useLocation().

react-router-dom NavLink doesn't reflect isActive change without refreshing the page

I'm trying to use the NavLink's isActive prop to check whether the link's route is the current route to apply some visual styling. Whenever I navigate to a page

Role based react-router

What is the best way to conditionally render routes in react-router based on user role. I have a case where not all roles have permission to view certain routes

React-router stops working when error boundary catches an error in route

The codepen linked to below, uses react-router and an error boundary to catch errors within each route. If you click on "Shop", the error is caught as expected

React router - useOutletContext testing

I'm using react-router V6 and trying to test the new feature of useOutletContext. my testing library is testing-library/react and I'm not sure how to pass the C

Not able to link a component in react js

I wrote a code to fetch a list of contacts, after clicking on the view detail button on the contact card, it should open a new page showing the contact details

Routing is not working after createing of of react app in MERN app

I created a MERN app that has a node.js server. To host the website on Heroku first I have to create a build folder by it using npm run build. After that, I hav

I'm getting blank react-app page on using Route

I'm having some kind of trouble when I'm using Router in App.js I'm getting a blank page when I am using, I tried a lot but couldn't found a way to solve the is

react-router-dom useParams() inside class component

I'm trying to load a details view based on a react-router-dom route that should grab the URL parameter (id) and use that to further populate the component. My r

how to solve Matched leaf route at location "/project" does not have an element error?

I'm learning react routing but when I try to use BrowserRouter I'm getting the following error: Matched leaf route at location "/project" does not have an elem

useParams() unable to fetch path dynamically react-router v6

My code is unable to render the elements of the nested route component present in my QuoteDetail code block while I'm using the dynamic path value import { Rout

Page is not rendering after using `history.push` in Ionic/React with `IonTabs` as nested routes

I have an Ionic/React v5.0.7 app with IonReactRouter to manage routing: // App.tsx return ( <IonApp> <IonReactRouter history={history}>

how to add props in route component in react-router-dom v6

As heading states, I used to have a page with a stateful component that gets different props based on changes to url made from . Now, upgraded to react router v

Deploying Reactjs website on github pages with routing results in 404 error on refresh

I've created a ReactJS webpage with multiple routes using BrowserRouter and deployed in via GitHub pages with its own domain. The website works perfectly as int

How to redirect in React Router v6?

I am trying to upgrade to React Router v6 (react-router-dom 6.0.1). Here is my updated code: import { BrowserRouter, Navigate, Route, Routes } from 'react-route

How to use div like link to redirect to another page?

I need to make div which will act simulate to Link element, so when you click on it you navigate to another page. Something like this <Link to="/employees"&g

React Router V6 - Error: useRoutes() may be used only in the context of a <Router> component

I have installed react-router-domV6-beta. By following the example from a website I am able to use the new option useRoutes I have setup page routes and returni

How to exclude a page in react app which is using aws amplify authenticator

I am trying to exclude one single page from amplify authenticator that I am using in my react app, but till now I haven't found any way to do so.I have tried wi

React Router works only after refreshing the page

I am a bit new to react and I am facing a problem with the Router. The routing works when I enter the URL directly on the browser, however when I click on the l

React-Quill - addRange(): The given range isn't in document

I am trying to make a simple blog using React-Quill text editor. I want to get the value of the ReactQuill Editor and preview it on a different route. I've been