Category "react-router"

Redirect Router after loggedin

Am trying to Redirect router to "/", without login it set to Landing.jsx, After login needs to redirect to Homepage.jsx which is also in same route "/". tried u

React router order of routes, does it matter?

I set up my react router like this: <Route exact path="/users"> <component/> </Route> <Route exact path="/users/:id"> <compon

How to implement authentication for the nested routes in React-Router 6?

I am trying to implement authentication for my routes like this using react-router v6 <BrowserRouter> <Routes> <Route path=

React State update with button click from another component

Please read the details below of code enter image description here This MegaMenu Component import MenuIcon from '@mui/icons-material/Menu'; import './MegaMenu.c

React Router 6 in Electron - No routes matched location

I am trying to use react-router v6 in an electron js application. but it doesn't work for me. This App works correctly without implementing the react-router! Wh

Multiple Guard on single route React

Can you put multiple route guards on one route? I'm trying to put two guards (one is auth and other is roleguard) on "/main/dashboard" so that it can only be ac

In React Router v6, how to check form is dirty before leaving page/route

Below are the package versions I'm using. React version - 16.13.1 react-router-dom version - 6.0.0-beta.0 react-redux version 7.2.0 Material UI version 4.11.0

[TypeError: (0 , react_router_dom_1.useParams) is not a function]

I have a component which uses react-router-dom's useParams hook to get params. It is used in my component as : /// Child.tsx const Child = () => { const

Webpack module federation lazy loading remoteEntry.js

Am I able to lazy load apps' entry files when I am using React with ReactRouter? When I enter page there are many requests for remoteEntry.js files for each app

AWS Amplify: DevTools failed to load SourceMap: Unexpected token < in JSON at position 0

I am getting several warnings when loading my website on Google Chrome similar to the following: DevTools failed to load SourceMap: Could not parse content for

How can I apply React Router v6 and react-transition-group transition to only specific routes?

what can I do if I want to exclude some 'routes' from the transition? For example, the routes are as follows; <Routes> <Route path="/login" element={

How to redirect to external url onClick? in React

I'm using react-router which means i'm storing routes in app.tsx file. I have cards components that need to redirect to an external url onClick. So my question

using react router with next.js

I am learning how to use Next.js/React for my application. I am currently researching the topic of routing and I had a few questions. I know that you can use re

React TypeError: __WEBPACK_IMPORTED_MODULE_0_react__.PropTypes is undefined

I am making a react app using routers and I'm getting the following error: React TypeError: WEBPACK_IMPORTED_MODULE_0_react.PropTypes is undefined How can I a

React router with basename and webpack initial url

Hello i am stuck with this one and couldnt figure it out. So i have React router v6 with basename - "/ui/" , and i want that when i open localhost:8080 that it

Mocking react-router-dom hooks using jest is not working

I'm using Enzyme's shallow method to test a component which uses the useParams hook to get an ID from the URL params. I'm trying to mock the useParams hook so

How to load firebase data before the component renders in react?

I have the following files... useAuthStatus.js import {useEffect, useState, useRef} from 'react'; import { getAuth, onAuthStateChanged } from 'firebase/auth';

Cancelling Axios request in React when using React Router Switch

I'm a newbie building an App that utilizes React Router to switch between 3 different components that each utilize Axios to fetch data from an API. I am trying

Get an active route with react-router in ReactJs

I am creating a project using reactjs.In my application i am getting the active route using this: this.context.router.isActive but getting undefined, i am us

How to run a function when user clicks the back button, in React.js?

I looked around and tried to find a solution with React router. With V5 you can use <Promt />. I tried also to find a vanilla JavaScript solution, but not