Questions tagged [react-router]

React Router - A complete routing library for React inspired by Ember's routing system

Filter by
Sorted by
Tagged with
0 votes
0 answers
9 views

Preserve Exit Animations with React Router v6 and Framer Motion

I'm currently working on a project that involves React Router and Framer Motion v6. I'm trying to preserve exit animations between routes, but I've run into a bit of a roadblock. Does anyone have ...
Rainy_Frog11's user avatar
0 votes
1 answer
25 views

React App - After Deployment Blank Page on Refresh for all Children pages. Locally all works perfect

My React App won't render any of children pages (including NotFound page) when refresh is performed. When using buttons within the app, all pages renders correctly. This is happening only on hosting ...
Maryando's user avatar
1 vote
1 answer
21 views

react-router v6 createRouterBrowser

I am trying to implement react-router in my app. I saw there is now data loading possible within the routing therefore I had to use the createBrowserRouter. I seem to not fully understand how it is ...
awesome_crab's user avatar
1 vote
1 answer
33 views

is there a way to invoke loader method from within the component in react

I am using a loader from react-router-dom to fetch data to be used in the component. I also have another function from within the component which updates some information which are initially fetched ...
Almas's user avatar
  • 43
-1 votes
2 answers
32 views

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

PropertyDetails.jsx import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import '../styles/propertydetails.css'; import Navbar ...
Gabriel Okemwa's user avatar
0 votes
1 answer
21 views

useLocation() error appears when requireAuth is used [duplicate]

I am using react router with react-auth-kit, now in my app.js import Home from "./pages/Home"; import Login from "./pages/Login"; import { Routes, Route, useLocation } from "...
Kendaichi's user avatar
-1 votes
0 answers
14 views

React components rendering when on home route and refreshing the page but not when in a different route

I'm attempting to build a chat app using React and Firebase. The issue I'm having is that when I'm inside the ChatsHome component and refresh the page, App.js is rendered and the useEffect hook inside ...
Dagem's user avatar
  • 1
0 votes
0 answers
20 views

Use API call data in another page react/typescript

I am trying to get the recipe info I collected from the api in the Home.tsx page and display it in RecipeLayout.tsx. I am currently just passing the data through props, so RecipeLayout.tsx is directly ...
Neelam's user avatar
  • 47
-1 votes
0 answers
30 views

React Router v6.15 lazy not rendering Suspense's fallback component

So i have been stuck on this issue with react router where the Suspense's fallback component wont render in any layout hierarchy except adding it to the RouteProvider like this. <RouterProvider ...
Prajil Shrestha's user avatar
1 vote
1 answer
26 views

Using React Router v6 to swap two different sections of my web app

I am using React Router v6 for my new web app. I am using the Outlet with nested routes to swap out the <main> component and that is working nicely. Now I also have an aside left panel to the ...
dmikester1's user avatar
  • 1,444
0 votes
0 answers
9 views

AllowedRoles in react lead to unothorized page, though role is correct [duplicate]

The target is to implement protected routes using RTKQuery and React Router 6. The problem is that whenever i reload the page I get redirected to unouthorized component, not to the outlet I am trying ...
Masha Baranova's user avatar
-1 votes
0 answers
23 views

Getting error in Nested Routing with react-router v6 [closed]

I am using new version of react-router-dom which is just released new version but I am having issue when using nested routing. I checked official documentation but don't understand. In this layout is ...
Mahendra Meghwal's user avatar
-2 votes
1 answer
28 views

navigate function does not rerender the component

first of all my project link on github: https://github.com/ARN1380/BookingHotel I'm using react-router dom v6, I have a BookmarkList in my project and I need to add or delete bookmarks from it, the ...
alireza naghavi's user avatar
-1 votes
0 answers
14 views

when the react detail router jump ,but the picture was not immediately changed [closed]

There are pictures or videos in the details page, when the details page jumps to the details page, the resource does not take effect immediately, but will display the content of the previous details ...
Fani's user avatar
  • 1
2 votes
1 answer
33 views

redirect routes with react state

I would like to check if my cms is installed (with a api call to my backend). I can fetch the value, I can see the "ok" value into console, but I'm not redirected to /login as expected. I ...
Vana's user avatar
  • 783
-1 votes
0 answers
25 views

React Route: NavBar not rendering [closed]

The problem I am facing is related to React-Router, where the NavBar component is not rendering as expected in my application. I am attempting to create a consistent layout that includes a NavBar ...
Matthew Okadinya's user avatar
1 vote
1 answer
20 views

React-Router - Run a parent route loader function each time one if its sub-routes is matched

Is it possible to re-run a root route loader function each time a sub-route is matched instead of just on the first time the root route is matched? I'm trying to handle some redirect logic in the ...
maja's user avatar
  • 709
1 vote
0 answers
20 views

SignalR with React Problem - Websocket events doesn't work when navigating

I use ASP Web Api as a backend for my application, and React for Frontend with react router we have a chat in some page that listens for new messages however when I navigate to another chat room using ...
Mohammed Sayed's user avatar
-1 votes
0 answers
13 views

React router overriding other subdirectories in CPanel

I'm working on a website using React, but I'm having some problems with the project. In the root directory, which I will call "www.mywebsite.com/", the company's landing page appears, made ...
Migliorelli's user avatar
2 votes
2 answers
29 views

React BrowserContext is lost in sub-sub-children

I have a Browser Context set up like this: ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <BrowserRouter> <ErrorBoundary FallbackComponent={...
Andrei Isakov's user avatar
-2 votes
2 answers
29 views

How can I find a url in history stack [closed]

In my React typescript application I am using React Router to navigate through the App. The workflow is as follows: User types in a search term in a textfield and hits "Search" User gets ...
cloo_coder's user avatar
0 votes
0 answers
15 views

Browser-Router from react-router-dom is giving me an error about hooks and i dont know what the cause is

i'm working on a project in react js and i want to create the routes to navigate to different pages, but when i use Browser router from react-router-dom it gives me the error: Uncaught Error: Invalid ...
Avenger's user avatar
-1 votes
2 answers
54 views

useEffect with no deps trigger browser router twice

I have a component called categories.js which will be called in App.js, there is a useEffect in categories.js as the following useEffect(() => { const fetchCategories = async () => { ...
hkguile's user avatar
  • 4,263
-1 votes
0 answers
22 views

Getting 404 error when using React router dom in a Next js app

I found myself using React router dom in a next js app instead of the in build routing system of Next js. Now i get a 404 error each time i reload the browser. I thing it's due to sever-side rendering ...
davdev's user avatar
  • 1
2 votes
3 answers
50 views

React - get parameters from route path in another component

I tried to find it, but I couldn't do it. I tested many results but the effects were disappointing. So I have this structure of application: <BrowserRouter> <Menu/> <Routes> &...
viko's user avatar
  • 513
-2 votes
0 answers
49 views

No routes matched location problem in React

This is the problem I'm facing: history.ts:501 No routes matched location "/Trailer/JaV7mmc9HGw" My App.js returns this: return ( <div className="App"> <...
Vithesh U S's user avatar
1 vote
1 answer
41 views

Breadcrumbs Issue with React Router (6.16.0) and TypeScript

I've been working on learning React-Router (6.16.0) by creating a simple Breadcrumbs navigation using isMatches() as they recommend in their documentation here: https://reactrouter.com/en/main/hooks/...
user3670371's user avatar
1 vote
1 answer
26 views

Can I use both Hash Router and normal router in different builds?

I want to make a fully responsive site, and I want to wrap it with Cordova to make a mobile app. But Cordova only supports hash router. Can I make my mobile build use Hash Router instead of the normal ...
JorgeeFG's user avatar
  • 5,657
1 vote
1 answer
31 views

React: avoid redirect to first step wizard when pressing back button in wizard

I'll try to explain this as clearly as possible. I have a wizard component that works like this: I open the wizard and fetch all the steps Then I redirect to the first step by using the React Route &...
tilly's user avatar
  • 2,219
0 votes
0 answers
17 views

I imported the useParams() hook and destructured it in a component so as to give the route an id but its throws an error "useParams is not a function" [closed]

code showing "useParams is not a function". import { useParams } from "react"; const BlogDetails = () => { const { id } = useParams(); console.log(id); const { data: ...
Georgebassey's user avatar
-2 votes
0 answers
28 views

Render component which uses "useLoaderData" to load data

I have the below React component which uses React Router 6's useLoaderData to load the data required for the page. Can anyone help me with how the below component needs to be rendered to load a mock ...
Devd's user avatar
  • 37
1 vote
1 answer
15 views

React Router Error when using URL Params in Loaders

I'm using React-router in my React project. I have a movie page which looks like this import axios from 'axios'; import React from 'react'; import { useLoaderData } from 'react-router-dom'; export ...
Sachin Titus's user avatar
  • 1,990
1 vote
0 answers
10 views

React Router different layouts for different Routes [duplicate]

I use two different layouts in the application: for content (MainLayout with footer and borders) and empty (BlankLayout without footer and borders). export type LayoutProps = { children: ReactNode, }...
Michael Linker's user avatar
-2 votes
0 answers
47 views

React js only displays 1 HTML page in the view source

I use React JS on my website, with more than 3 pages, but when I view the source why only the Homepage page appears. What is the solution so that my web displays all the html tags like other webs (...
fajriyan's user avatar
-1 votes
0 answers
42 views

How to listen to back button in the browser to warn user for unsaved data in React?

I'm trying to warn the users about unsaved data when they click the back button to navigate away from the page. I'm using React Router V6 so usePrompt or useBlock hooks are not available. They have ...
shunshun's user avatar
-1 votes
0 answers
32 views

navigate("/") not redirecting after POST request

import React, { useState } from "react"; import axios from "axios"; import { useNavigate } from "react-router-dom"; const Add = () => { const [pelicula, setPelicula]...
David Franjul's user avatar
0 votes
0 answers
25 views

Wait for dispatch action to be completed before redirecting back to previous page in a modal

I have the following modal that I am using in my react application to delete a project. I am passing a function as a props to the modal that dispatches the delete action. <DeletionModal ...
Unah Henry's user avatar
0 votes
2 answers
42 views

React-router 6 errorElement not rendering an error component

In my react app I'm trying to render custom error component for unmatched routes but default error page is shown. This is how my browserRouter looks. const router = createBrowserRouter([ { path: ...
STARCHILD's user avatar
1 vote
1 answer
44 views

React Router Redirect Issue When Clicking Links

I'm encountering a problem with React Router where I have a header component and a home component, and I want to navigate to a movie detail page when a movie is clicked. The issue is that when I'm ...
Dhia's user avatar
  • 13
-1 votes
0 answers
40 views

I can't access a URL with query params from outside the site

I am using react-router-dom@5.2.0. I need to access this URL "/invitation/admin?token=1234" from outside my react site. I have declared a route "/invitation/:roleUser", but I don't ...
Dani Martorell's user avatar
1 vote
1 answer
47 views

Routing problem: Index.html blank after deploying React App on render

I finished a react project and after deploying it to Render everything is blank. I tried everything I found as solutions to this problem but nothing worked. To simplify the matter for me and to ...
medosem's user avatar
  • 65
-1 votes
0 answers
10 views

How to Wrap Specific Routes in a Separate Context in React Router v6? [duplicate]

Wrap Routes in Context Default (GPT-3.5) User I have a problem I want to ask on Stack overflow. Help me prepare a text. I'm working on this react project. The developers implemented routing using ...
Soraya's user avatar
  • 1
2 votes
2 answers
33 views

ReactRouter not recognizing a valid path and it's rendering NotFound

I'm coding a lyrics fetcher app (ReactJS + Redux + React router) that consists of a landing page where the app renders the top 10 tracks for the user's country, and also a search form to search for ...
GD1's user avatar
  • 99
-1 votes
0 answers
14 views

Need help replicating React code sandbox in Next.js (ReferenceError: document is not defined)

React noob in need of help here! So, here's the sandbox (an example from the Framer Motion site) I'm trying to replicate in my Next.js App. The sample uses create-react-app, and I'm having a hard time ...
Ishaan2053's user avatar
3 votes
2 answers
46 views

Reactjs routing composed routes

I'm having some difficulty with react routing and having trouble comprehending composed routes. I've attempted some code, but unfortunately, it's not functioning as expected. The "/" path ...
evelyn's user avatar
  • 31
1 vote
2 answers
24 views

Ionic Router: Subpage is only loaded after refreshing the page

I have a list page, where all games from my games.json file are displayed. This is what that looks like in GameListPage.tsx: <IonList> {gamesJson.map((game) => ( <IonItem ...
niklaswort's user avatar
0 votes
0 answers
35 views

How do I validate a input (type file) and use it with action from react router 6.4+?

I would like to upload multiple files to a backend and am using react router's form element for that, and "action" to submit the files. I intend to show a preview for every file uploaded ...
wheeiraeth's user avatar
1 vote
1 answer
35 views

Navigation when clicking on an svg (using react)

I have an SVG Map which I have setup like this (I will skip a lot of the map out as it's mostly fills and quite large) import React from "react"; function Map() { return ( <svg ...
Joseph's user avatar
  • 571
2 votes
1 answer
30 views

How to hide the parent component data when going nested in the component?

I am learning React and trying to build a project which is a simple house listing website. Here I am navigating to the top menu "List Room" which is showing in the image and then when the ...
Puru Chaudhary's user avatar
-1 votes
2 answers
37 views

Routing to a specific component

I have just started with the project (task management app) using ReactJS. Page-1: Home Page Here it will display the created tasks if any or else it should display "no tasks here" It has two ...
Abijith's user avatar
  • 43

1
2 3 4 5
405