Category "react-router-dom"

React-Router: Force reload in browser

We have a monolithic react SPA deployed with AWS Cloudfront. We are trying out microsite architecture where each route/path in the react app will be built and d

how to create deep paths in a tree structure in react-router v6

Here is a codesandbox that illustrates the problem: If I have a tree of objects like this: const tasks: Task[] = [ { id: 1, name: "one", children:

React-Router-Dom <Link /> tag is changing URL but not rendering the Component

Header Component import React from "react"; import { BrowserRouter as Router, Link } from "react-router-dom"; import { ReactComponent as Logo } from "../../asse

React Router V6 shows blank page

I am facing a problem. I am trying to use React Router but it keeps showing me a blank page. Here is my code: App.js: import React from "react"; import { Browse

Property 'isOpen' does not exist on type 'IntrinsicAttributes. ts(2322)

I'm creating a navbar, but I'm not able to show the Wrapper menu when clicked. The error occurs when inserting isOpen = {isOpen} in <Sidebar /> ERROR Typ

withRouter' is not exported from 'react-router-dom

After npm i --save react-router-dom and npm install --save with-router I tried to write import {withRouter} from 'react-router'; But I Get this error Attempted

How To Pass Props To Function Component use react-router-dom v6

I want to pass props into a function from the route, my code currently looks like this Route <Route path="/person" render={(params) => <ProductDetails

Define React Router Routes In Another Components

I am using react-router-dom 5.2.0. I want 2 files that define all of my routes. 1 file for public routes, 1 file for private. The right component renders when I

Using react-router with recoil

I have 'react-router-dom' and 'recoil' in same application. What is a proper way to update recoil state within route? const ItemRouter = ()=> { const [s

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

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params') TypeError: Cannot read properties of undefined (reading 'para

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

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params') TypeError: Cannot read properties of undefined (reading 'para

React-router-v6 access a url parameter

How can i access url parameter in my react component ? App.js <Route path="/question/:id" element={<QuestionView />} /> QuestionView.js class Quest

How can I configure React router correctly to navigate to a new page?

I have a navbar containing 3 Anchors, I want to navigate between different pages when clicking on each one. I've used react-router (version 6.3.0) to achieve th

React router routes don't match location

Unsure why this isn't working? Everything has been imported correctly so am unsure why I get the following error message in the console: No routes matched loca

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

React Router Outlet and Protected Outlet does not working

I want to render outlets based on user login state. The problem is the oulet never get rendered. Only parent element is rendered.I tried using "/:username/board

React ERROR:TypeError: Cannot read property 'pathname' of undefined

This is my Menu component. I later import it in routes.js. I am getting this error. TypeError: Cannot read property 'pathname' of undefined After searching

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 v6 - Image not found in nested routes

In my tsconfig.json file, I have a "compilerOptions":{baseUrl} that enables me to look for images in public/images/foo.png like this <img src='images/foo.png

React Router: Conditional redirect if not query parameter present

I am trying to do a conditional redirect, if there is no 'state' query parameter in the url, I want to redirect to an error page. I am trying to do it in my App