Questions tagged [react-router-dom]

Use this tag for questions regarding DOM use and bindings of React Router v4, v5, and v6.

Filter by
Sorted by
Tagged with
1vote
0answers
9views

React set assigned page based on assigned role

I'm trying to solve a problem where I want to set an assigned page according to the user's roles (ie: admin, regular user, etc). However, whenever I set it. I logged in but then the assigned page does ...
user avatar
0votes
0answers
14views

Value of last used route in react-router-dom v6

In my app I need to add a condition before using navigate(-1). Is it possible in React-Router-DOM v6 to access the previous route value? I know that I could create history array by myself and add ...
user avatar
1vote
1answer
16views

How to prevent protected route from automatically redirecting on redux state change

I have created two route components, one for authenticated users and the other for guest. each of the routes checks on the redux state for the authenticated property to determine if a user is logged ...
user avatar
  • 11
0votes
0answers
35views

Use Navigate function not working (React)

I'm following a tutorial and everything was going great until I tried to implement Navigation through a search input. For instance, If I am on http://localhost:3000/searched/profile. Typing out an ...
user avatar
1vote
1answer
21views

Access react router dom history object outside React component

I am looking for a good way to use the history object of react-router-dom anywhere in the app. No matter it's a react component or not. The solution I thought might be good was using the window object....
user avatar
  • 87
1vote
0answers
20views

React Router v6 - Using NavLink but getting No routes matched location "/"

I am trying to use a navlink in my app.jsx file to create links in my navbar but when I try to npm start, I dont see the nav links and I get a message that says No routes matched location "/"...
user avatar
0votes
0answers
10views

useNavigate: Navigate to external Link

on Clicking of a button, I want to perform an async operation and after that navigate user to an external website as shown below: navigate("https://wwww.google.com?q=ABC") But here's the ...
user avatar
  • 1,677
0votes
2answers
31views

Link to(react-router-dom) conditional rendering when a button is clicked

If you type user in the text box, it will go to the user page, and if you type admin, it will go to the admin page. This is my code. constructor(props) { super(props); this.state = { ...
user avatar
  • 41
0votes
1answer
16views

jsx display page variations under a condition of a boolean

I was looking to display Parameters and Disconnect in my homepage if the states of the var userConnected is true and to display only Login and Register if the state of userConnected is false. I would ...
user avatar
  • 5
0votes
0answers
39views

react-router-dom v6: useNavigate() not working

So I'm trying to redirect the Add to Cart button to Cart screen but it isn't working ProductScreen.js useNavigate() redirects to the link but doesn't display anything import React, { useState, ...
user avatar
  • 1
1vote
1answer
29views

how to pass outlet context to nested route in react router v6

I am using react router dom v6 how can I access the context in a nested route in the second child <Routs> <Route element={<Parent/>}> <Route element={<Child/>}&...
user avatar
  • 191
1vote
1answer
53views

how to Route parent to child component in react router dom

I have an admin dashboard you can check to hear I want to that if the admin clicks in user(You can see in the screenshot) then it will render the user page and other pages I trying to implement Nested ...
user avatar
0votes
0answers
18views

How to display something determined by if the user is connected or not to a website

I'm looking for something that display some links (login & register) if (!userConnected) but if(userConnected) I want to display another informations than login & register. I will display the ...
user avatar
  • 5
0votes
0answers
11views

React Router V6 activeClassName [duplicate]

So it seems form what i have read all over the internet, this activeClassName has been removed or something. For hours I've been trying to change this button in my sidebar of my application: {...
user avatar
2votes
1answer
15views

Render same component for 3 routes

I want my react router to return component only when URL matches either of those 3 paths exactly and return an error when it doesn't. How can I shorten this? return ( <BrowserRouter> ...
user avatar
  • 99
0votes
0answers
20views

Prevent sub component from being re rendered

I have a really particular issue. Here is the principal component you need to know const Layout = () => { const [collapsed, setCollapsed] = React.useState<boolean>(false); // We have to do ...
user avatar
1vote
1answer
21views

useNavigate doesn't load page when navigating between siblings component

I'm working at a react-js app using react-router-dom v6 I try to simplify my framework to make it clearer. MainRouter.js <BrowserRouter> <NavBar/> <Routes> <Route ...
user avatar
  • 55
0votes
1answer
25views

React Router/History Can't Resolve "history/createBrowserHistory"

I cloned my react project today and the project was working fine on my other mac. Then I started to face some problems with my router, especially the history. The code in my history.ts is: import ...
user avatar
1vote
1answer
17views

How to show different icon in active NavLink in react-router-dom v6?

I want to show a different icon when a particular nav link is active. I made a new component import React, { useState } from "react"; import { NavLink } from "react-router-dom"; ...
user avatar
-1votes
0answers
9views

i am using normal link tag in localhost output show but when i use react router dom Link tag there is no output

i am using Link tag nothing is display to output. WARNING in ./node_modules/react-router-dom/index.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map ...
user avatar
0votes
0answers
13views

Sharing state across specific routes in react router v6

I basically need to share a state to a few pages in my application, but exclude for example the login page and signup page. My current solution is using a context, however this still causes the ...
user avatar
0votes
1answer
41views

Cannot pass state using useNavigate() in react router dom v6

Hi I was trying to pass a value to another page using useNavigate, when a button is pressed (button B), it calls the function, which contains the navigate function that I got from the useNavigate() ...
user avatar
  • 23
1vote
2answers
26views

How to send MULTIPLE params with useHistory hook in React?

history.push({pathname: '/search?', state: {param1: 'value1'}}) this doesn't work. It just redirects to /search history.push('/search?', {param1: 'value1'}) this doesn't work. history.push('/search?', ...
user avatar
0votes
0answers
23views

React router v6 testing library navigate relative fails

In my application i use relative navigation with react router v6 (we are currently migrating) and it works fine. When i try to do some tests using Jest and testing-library the relative navigation ...
user avatar
0votes
1answer
17views

Should I filter an array by passing a query string (the search param) or state with history.push in react is?

I am filtering and updating rendered cards from an array of cards on a product index page. Now my question is, what the benefits va downsides are for using state vs search as a param with the ...
user avatar
1vote
1answer
21views

React-router-dom how to use the goBack function without usingHistory

How can I simulate pressing the "back" button in the browser from the code? const history = useHistory() history.goBack() I know I can do this as well, but as I understood in the new ...
user avatar
  • 13
1vote
1answer
48views

react-router-dom v6 Routes showing blank page

Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom ...
user avatar
  • 57
1vote
2answers
32views

How to call navigate inside Redux Toolkit's actions in React js

I've a simple app built on redux-toolkit. I am dispatching createProduct actions which is working fine. I want to navigate to /products/ page form /products/new page after createProduct action. How ...
user avatar
1vote
2answers
38views

I don't want to show Header & Footer on Error page in React JS

Hi I am new in React JS and I don't know how to work with react router dom. Actually I don't want to show Header & Footer on Error page in React JS function App() { return ( <> ...
user avatar
0votes
0answers
19views

non-serializable value was detected in an action

I have read on Serializability and how I cannot pass data such as functions as payload. I also read about getDefaultMiddlewares which has a deprecation warning #1324 so I decided to research further ...
user avatar
  • 49
-1votes
0answers
35views

react-router-dom not rendering anything

I am new to react and am unable to get react routing to work. My screen goes completely blank when I try to use it and displays nothing. I tried to follow the official documentation and write a simple ...
user avatar
1vote
0answers
41views

Type 'unknown' is not assignable to type 'ReactNode'

I'm dealing with sending a piece of data over to another page, I'm using navigate from react-router-dom v6, I don't know how to fi this error, This is my code When I console.log the location.state it ...
user avatar
  • 61
0votes
1answer
20views

React Router v.6 usePrompt TypeScript

I am basically trying to intercept route changes. Maybe something equivalent of vue's beforeEach in React Router v6 could be useful as React Router v.6 does not include usePrompt. BEFORE each route ...
user avatar
1vote
1answer
24views

Pass props to child component through Route in react-router-dom in Function Component

My current Home component snippet is: function Home() { return ( <div> <AddTaskForm ailDivision={ailDivision} ascDivision={ascDivision} apcDivision={...
user avatar
  • 25
1vote
1answer
24views

Bootstrap navbar isn't refreshing in react

My bootstrap navbar is working fine but when I click on current page navbar link, that link is unclickable means it is not letting me click on it again. Other navbar link are clickable except current ...
user avatar
0votes
0answers
28views

No routes matched location "/products"

I am creating a site in react that has an initial authentication page, and a protected route to the administration panel that is shown when the user is logged in. //route for authentication <...
user avatar
2votes
1answer
24views

HashRouter No routes matched location

I am currently trying to implement a hashrouter and Im getting the error: No routes matched location "register" going to the url localhost:3000/#register My index.js: import React from ...
user avatar
0votes
0answers
30views

How to redirect authorized user with <Outlet />React-router-dom

I have a PrivateRoute that contains another private pages. The problem is that after check, I getting a blank page because my home page '/' is empty. I used in PrivateRoute component and I need to ...
user avatar
-1votes
0answers
36views

React Router Dom v:"^6.2.2" - 404 page when I reload in deploy

Locally everything works fine when I run npm start. But after I deploy and reload the page using browser reload button, the page get's 404 page. It's been a week now that I have been searching for a ...
user avatar
0votes
0answers
22views

react-router-sitemap generating a sitemap.xml with just the URL

I am trying to use react-router-sitemap in order to generate a sitemap.xml for our site. However, the output file is only listing the URL and not any of the routes. Output file - <?xml version=&...
user avatar
2votes
3answers
40views

No routes matched location "/cart/2?qty=%201" react router dom v6

i'am trying to organise my routes application using react-router-dom v6 so there is when I want to access the CartPage component by clicking on the button "Add To Cart" inside ProductPage ...
user avatar
1vote
1answer
19views

React Bootstrap Navbar Routing

I am new to react and I am trying to create a simple navigation with bootstrap and routing using navbar. Though the URL changes, the UI of the page is not rendered. Here is my code Index.js import ...
user avatar
  • 961
1vote
1answer
26views

How can I make a button link to another component?

I am attempting to load my register component when a button is clicked in my login component using useNavigate hook but when I add onClick={navigate('/register', {replace: true})} in the button, it ...
user avatar
1vote
1answer
43views

How can I hide header component in Login page

I have a global header component inside my router. But I want to hide on the login page. I tried to use window.location solution like this. It works but doesn't work after the login page navigates to ...
user avatar
-2votes
0answers
11views

React Routing issue: Update 2022

Compiled with problems:X ERROR in ./src/App.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: D:\.vscode\DATA\project_2y\notesapp\src\App.js: Unexpected token (3:...
user avatar
-1votes
0answers
14views

useHref() may be used only in the context of a <Router> component

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
user avatar
0votes
1answer
19views

How do I make parent component stay while switching between other components in react router v6? [duplicate]

So, I have an AdminScreen page where I have some headings and a ul and below that I want to define some links and when a user clicks on that link, I want to render some component (but I want the ...
user avatar
  • 65
0votes
1answer
25views

Why react-router-dom does not work in this code

I'm studying react app and try to use react-router-dom. I typed the "http://localhost:3000/" in the browser. My expectation is "Home" is displayed in the browser. However, as the ...
user avatar
  • 3
0votes
1answer
17views

How to make MySQL data a link in frontend using Reactjs?

Intended function: Projects names pulled from MySQL database that are listed in table column, will be a link to /projects page listing related unique information. What is actually happening: Project ...
user avatar
-1votes
3answers
26views

React Router Dom Dynamic linking gives wrong data

I'm trying to make a dynamic project page using react router dom v6, using params gives the right id in console, but the project displayed is wrong, heres an example: The "id: 7" is the ...
user avatar

15 30 50 per page
1
2 3 4 5
105