Questions tagged [react-router-dom]

Whenever I need to navigate from one route to another using this.props.history.push("/"), I also want to pass along some extra data. For example: this.props.history.push('/postDetail', {data: item}). However, I am uncertain about where to define ...

I'm currently working on my App.js file where I have defined all the routes for my application. I wanted to implement React-Router data loader functionality. import React from 'react' import { Routes, Route, Navigate, RouterProvider, createB ...

For example, here is the code I use for my login button: var rJson = JSON.parse(request.responseText); if (rJson.success) { console.log("login success"); window.location.replace(redirectLink); } While it wor ...

Encountering a routing issue while using react-router-dom v6 to manage the functionality of "cart items" in my application. Strangely, the cart items fail to show up when clicking on the "cart" link on the navbar header. However, it functions correctly and ...

Hey there! I have a situation that I need help with. I tried putting the Link around the whole post so that I could prevent bubbling for individual buttons, but for some reason stopPropagation() is not working as intended. Following advice from another s ...

My goal was to merge the persistent drawer similar to the example on the MUI website with react-router-dom. However, I encountered a problem where the transition effect no longer seems to work properly. The paragraph does not resize to accommodate the open ...

I'm facing an issue with passing a function to a link component. I tried using state and useLocation, which work fine for regular variables, but useLocation returns null when attempting to pass down a function. const myFunction = someFunction(); <Link ...

Currently facing an issue while working on a MERN Web App. When logging in with an existing account, the backend API call returns user properties and a JWT Token. Upon saving it, I use the navigate function to redirect the User to the homepage. Everything ...

Whenever I attempt to execute the command '[email protected]' I encounter Error message: 'withRouter' is not available for export from 'react-router-dom' import {Route, withRouter } from "react-router-dom"; ...

Currently, I am utilizing the react-router-dom library to manage routers. However, I have encountered an issue where linking to another page does not change the page, but instead adds the new page right after the previous one as shown in the image below. W ...

In my React project, I am currently working on creating the admin dashboard and designing the UI area for user interaction. I have encountered an issue where I am unable to separate the admin theme from the PublicTheme. Even when navigating to "/admin/lo ...

I'm currently refactoring this code and struggling to find a suitable replacement for this section. This is due to the react-router-dom v6 no longer having the useRouteMatch feature, which I relied on to extract parameters from the URL: import React, ...

I am currently implementing protected routes in my Redux and Pure React app using React Router Dom. The issue I am facing is that when I navigate to /profile/edit and then refresh the page, it automatically redirects me to /login and then to /profile. I ha ...

Having trouble getting the fetch function to run more than once in my application. It works the first time, loading the page with received data, but when I navigate to a new URL without refreshing the page, nothing changes - not even the state. The same is ...

I am new to React, especially with react-router. I came across an example on this website: . I decided to try replicating it on Codesandbox.io as well: https://codesandbox.io/s/7jxq0j6qp0 My issue is that the Menu component keeps re-rendering every time ...

I am attempting to extract the output of the code in navigation, but unfortunately it is generating a dreadful error: Unhandled Runtime Error Error: You cannot render a <Router> inside another <Router>. You should never have more than one in ...

I have been working on configuring my react-router and so far it has been smooth sailing with simple routes like: /login, /logout, /admin. However, I am now facing an issue with setting up a route like this: /admin/groups/modify/:groupID. While the /admin/ ...

As I delve into react routing practice, I've put together a geography-based web app. Starting off, I configured the router paths: import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter, ...

After creating two routes, I'm facing an issue where the 'Main' component is displaying properly but a 'NotFound' page also appears at the bottom. Any suggestions on how to fix this? I've spent the last 10 hours trying to troubleshoot this problem, but ha ...

I am currently using react-router-dom v6 for my routing needs. My goal is to pass an ID in the navigate URL path. Here is the onClick method and button code that I am working with: let navigate = useNavigate(); const routeChange = (id) => { let ...

I have my private routes set up in App.js, and all the other components within the private routes render correctly except for the About Component. Initially, I was receiving an error message stating something like "expected a string but got an object." N ...

Setting up authorization in React has been a priority for me. Ensuring that users cannot access unauthorized pages within the application is crucial. To achieve this, I have created a custom component as shown below. import { ReactNode } from "react&q ...

Encountering a unique problem I've never faced before. Utilizing Material UI components, specifically using CardActionArea in conjunction with Redirect from react-router-dom When the user clicks on the CardActionArea, the intention is to direct them to ...

Struggling to figure out what I'm missing here. My routing was functioning well until I switched from BrowserRouter: import { BrowserRouter as Router } from 'react-router-dom' Now, I need to navigate programmatically outside of my componen ...

Required feature: The project names fetched from the MySQL database and displayed in a table column should serve as links leading to the corresponding information on the /projects page. Current status: Unfortunately, the project names extracted from the M ...

Trying to access specific data from my json file using an ID, like "http://localhost:3001/pokemons/3", leads to a 404 error. All the data is visible at http://localhost:3001/pokemons. It seems that useParams doesn't want me to use id as a number - quite ...

Within my React application, I have implemented a layout that includes a sidebar, header with profile section and search bar components. The header is displayed on every page or route, allowing users to perform searches from any location. Upon initiating a ...

Convert all Switch elements to Routes and components to element How can I update the remaining parts to v6? Routes.js import React, { lazy, Suspense } from 'react'; import { HashRouter as Routes, Route, Router } from 'react-router-dom&apo ...

Hey there! I'm currently diving into react router v6 and struggling to add custom params in the route object. Unfortunately, I haven't been able to find any examples of how to do it. const AdminRoutes: FunctionComponent = () => { const ...

I'm trying to figure out how to hide my sidebar on the login page so only logged-in users can see it. Here's my code, but I can't seem to hide the sidebar... <BrowserRouter> <div className="container"> ...

I am encountering an issue with this section of code while utilizing Redux for state management. The expected behavior is to trigger the dispatcher (noted with a comment) only once when the user logs in, but it is being called three times every time App. ...

import { BrowserRouter as Router, Route } from 'react-router-dom' <Router> <switch> <Route exact path='/' component={main} /> <Route path='/build/signup' component={SignUp} /> </swit ...

I am currently experiencing an issue with rendering a component in my React TypeScript application using React Router. The problem arises when trying to navigate to the AddTask component by clicking on a link within a <nav> element. Strangely, the co ...

Currently, I'm diving into the world of react-redux with react-router. On one of my pages, it's crucial to know which page the user clicked on to be directed to this new page. Is there a method within react-router that allows me to access inform ...

I'm encountering an issue on my personal website that only occurs in production, but not in my local environment. Here's the situation: I have set up the routes as follows const Routes = () => ( <Router> <Route exact path=&quo ...

Struggling with using history.push in an onClick event to pass user id to a Profile page component, but the uuid params in the URL are showing up as undefined. Feeling stuck at this point. I also need to include all other props obtained from the Random Us ...

I am grappling with setting up an onLoad event in order to retrieve data from my database. My challenge lies in utilizing a URL parameter as a prop for this task, and I seem to be stuck on how to access it. Currently, I am working with react-router v6, ev ...

In my application, there are scenarios where multiple routes must pass through a component before rendering specifics. Additionally, there are situations where something is displayed for the parent route and then divided for the children. It's crucial to ...

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

The console.log confirms that the user input 'searchTerm' is successfully raised up from the component by the onClick function and then saved to the state in the handleClick function. However, it does not pass through to the second route. fun ...

Here, we have a SubComponent and a MainComponent created to showcase an image collection. The Subcomponent allows you to toggle between pictures in the collection using the onclick() event. The MainComponent also includes links to other collections, which ...

Just starting out with React and trying to learn from various online resources. I stumbled upon some MERN full stack login code on the internet. When I run npm start, everything works fine, but when I try npm test, I get an error saying 'ReferenceError: lo ...

Is it possible to implement a functionality where clicking on a div, wrapped in react-router-dom tags, will navigate to the established path, but if the click target is a delete button within that div, the navigation should be bypassed and only the onCli ...

Currently, I am working on developing my very first full-stack application with React for front-end and Node.js with Express for back-end. I have set up a /login route using react router dom where users can input their email and password ...

I've run into an issue with my project that involves using only React class components and fetching data from an Apollo server. The problem I'm facing is that, in Chrome, only the Navbar.jsx component is rendering. Even when I navigate to one of the link ...

My goal is to improve the organization of my Routes in React and separate concerns. I am currently utilizing react-router-dom version 5. Within my Application Routes component, I have structured it with 3 children components: AuthenticatedRoutes PublicRo ...

In my React and Next Js application, I am utilizing react-router-dom for routing purposes. The dependencies listed in the package.json file are as follows: This is how my current package.json file looks: { "name": "MUSIC", "versio ...

Having trouble rendering my Search component within the main Header component using react-router-dom. I suspect there's an issue with this line of code <Route render={({ history }) => } /> I've been stuck on this for two days now... T ...

The router seems to be experiencing an issue where it does not render a component. Specifically, on the home page, the Private Route is only rendered once. Clicking on a NavLink changes the URL to "/agreements", but the component itself is not being render ...

I am struggling to implement a page redirection upon form submission. I have come across various suggestions, such as: this.props.history.push("/") And also the recommendation to utilize: import { useHistory } from 'react-router-dom'; //Followe ...

I have implemented Material UI's switch component in my multi-page app to change themes. However, I encountered a bug where the switch does not visually toggle from left to right (UI functionality is not working), even though the onChange event handler fun ...

I am facing an issue while trying to implement routes in my react project with three separate components: Window.js import React, { Component } from 'react'; import SideBar from "../SideBar/SideBar"; import MainBody from "../MainBody/MainBody"; import { ...

I am currently using react in combination with laravel, where my view routes are dependent on the react router. In order to achieve this, I have added the following Route in web.php: Route::get('/{path?}',function(){return view('welcome');}); along with o ...

I have been working with react-router-dom and my app.js file currently has routing set up like this: <BrowserRouter> <div className="App container"> <Header/> <Switch> <Route exact path='/& ...

My current challenge involves rendering React components based on the component names in a JSON file I've created. Specifically, I want to render the TestSection component within the context of my Route component. To achieve this, I am utilizing the ...

I'm facing issues nesting a path within another path in react-router-dom version 6. When I try to visit the nested argument's page (/blog/1), it shows up as a blank non-styled HTML page. However, when I add a child path to the root like /blog, it ...

I am facing an issue with setting the default route to the home page in react router v5. Despite trying several methods, I cannot get it to work as expected. Index.js import React from "react"; import ReactDOM from "react-dom"; import ...

I'm having an issue with my routing setup while transitioning from the login page to the main page. Here's how my Routes are structured: App.jsx <BrowserRouter> <Routes> <Route path="/main/" element={<Main />} /& ...

I've encountered a problem trying to change the color of a Link inside a Button. Despite setting the secondary color for the Button, the color change doesn't seem to take effect, whereas it works fine for other components. <AppBar position=&a ...

My goal is to have the URL display "/login" in the address bar when I am on the login page. // App.js <Routes> {isLoggedIn ? ( <Route path="/" element={<Root onLogout={handleLogout} />}> <Route index e ...

After deploying my react app on an S3 bucket, I encountered an issue where only the home page would display and all other pages would result in a 404 error. Despite switching from browserHistory to hashHistory, the problem persisted. The console showed a ...

When attempting to incorporate a Link component from React Router Dom into my Material UI TableRow, I encountered an issue. <TableRow component={Link as any} to={`/company/${company.id}`} className="clt-row" key={company.id}> The error message I re ...

Here is the structure of my App component: const App = (props) => ( <BrowserRouter> <PageTheme {...some props I'd like to change on route change}> <Switch> <Route exact path="/example"> <E ...

I'm currently working on implementing nested routing in React using react-router-dom 5.2.0. For a better understanding of the project, you can access the CodeSandbox link here: https://codesandbox.io/s/nested-routes-8c7wq?file=/src/App.js Let's start by l ...

I'm a beginner in the world of React and I could really use some assistance. Right now, I am working on creating a portfolio using React and focusing on the Nav component. Although I haven't encountered any errors in the Console, when I click on each Link ...

I'm feeling a bit lost when it comes to the new usage of react-router-dom v6. According to their documentation, we should be able to simply place our Route component inside the element prop, but I keep encountering this error Uncaught TypeError: meta.relat ...

I recently encountered an issue while implementing useHistory() in my code. Previously, I had used it without any errors, but now I'm getting the following error in this component: Line 6:18: React Hook "useHistory" is called in function "showPost" which ...

I am trying to implement a Redirect from react-router-dom version 4.3.1. I have all the logic in my app.js file where I make a request for the token, and if it exists, I need to redirect the user to the homepage. I also attempted to use history, but it doe ...

I am working on implementing unique custom URLs for each item based on user interaction. After a user clicks "View Item", I want to redirect them to a URL that includes the item's name and ID, like this: "http://localhost:3000/item-1/-MC_xbIMm8zctEWRJ-Lj/" ...

I have recently discovered that in react-router-dom v5, it was possible to utilize the <Prompt> component to prompt the user before a page transition occurs, allowing them to prevent it. However, this feature has been removed in v6 with plans for a m ...

When the user types in "user" in the text box, they will be directed to the user page. If they type "admin", they will be redirected to the admin page. This code belongs to me. constructor(props) { super(props); this.state = { userType : 0 ...

When setting up a BrowserRouter in index.tsx, the following code is used: import './index.css'; import {Route, Router} from '@mui/icons-material'; import {createTheme, ThemeProvider} from '@mui/material'; import App from './App'; import {StrictMode} from ...

In my react project, I have implemented a material-UI drawer component. The issue I am facing is that the drawer component contains the page content within itself. Previously, I managed to integrate routes using react-router-dom with the drawer. My current ...

Utilizing react alongside Material UI to display a navigation bar, I am attempting to dynamically apply styles to the selected menu item based on the URL. To achieve this, I make use of useLocation hook to retrieve the current URL: import { Link, useLocati ...

I've developed a React website with user authentication and a sidebar. The routes are protected to ensure that only logged-in users can access certain pages. To show the sidebar only after login, I have placed it inside protected routes and kept sign- ...