Category "react-router"

React Router Removes server prefix (Reverse Proxy)

I am trying to run a React Application behind a reverse proxy server that has a prefix(say root-prefix) and secondary prefix(say subdirectory/path). The final U

Protected route with react router v6

What is correct way to write a ProtectedRoute with new version 6 of react-router? I wrote this one, but it's not a route const PrivateRoute = ({ component: Com

when trying to navigate to another route page took reload in react

when I navigate to another route the page took automatically reload though its a single Page application. I am using react bootstrap navbar.

React router component not destroying when user leaves the page

I have a video player (jsmpeg player) that opens up a websocket to a server to play live video. The way the video server works is that it counts the number of c

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