Category "react-router-dom"

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

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

is there a way to implement react scroll along with react router dom?

I have a navbar with links that scroll to sections of page using react-scroll. i also have several pages and im using react-router-dom for navigating between pa

Why isn't my React context being updated?

When I use the app and navigate to the SetContext component, I see the value of auth is correct ("dummy value") and after entering a value in the edit field and

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

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

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

What is the difference between Nav.Link vs Link vs NavLink in react router DOM and react bootstrap?

I am confused about these three Links, what are the different ways to use them? Nav.Link Link NavLink i Do they have different use cases?

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

React-router-dom Link change the URL but it doesn't render the component in Rect JS

I am using React js components and want to render something by access some URL so problem is when i click on the Link it change the URL but does not render the

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

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