Multiple path names for a same component in React Router

I am using the same component for three different routes: <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets"...

Routing in Chrome Extension written in React

I want 2 pages in my Chrome extension. For example: first(default) page with list of users and second with actions for this user. I want to display second page by clicking on...

I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

I am using as an environment, a Cloud9.io ubuntu VM Online IDE and I have reduced by troubleshooting this error to just running the app with Webpack dev server. I launch it...

React Native webview routing

I'm actually building a React-Native app, with some native screens, and some screen where I load the website with a webview. Instead of the classical website navigation, I have a native drawer...

React Router Error related to Link To

I am trying to route the components from one to another, i am getting errors related to the react router link and the error for the react router is - Failed to compile i have tried using react...

Differences between JSX syntax and React.createElement()

I'm having a look at React Boilerplate and I noticed that when I change the syntax from JSX to regular JS (using React.createElement) I have the warning Each child in an array or iterator should...

Firebase hosting with react router

I have a react app that uses react-router with a Router that looks like: <Router> <div> <Route exact path="/" component={Homepage} /> <Route path="/map/:uid" component={Userpage} /> ...

React js -[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event

I am working on React js on one code where I am using select element and onChange event. handleChange = (event) => { this.setState({value: event.target.value}); } render() { ...

How to redirect one page to another page in reactJS?

App.js This is the event handling button click: this.handleClick = this.handleClick.bind(this); handleClick(e) { debugger; e.preventDefault(); ...

./node_modules/react-router-dom/node_modules/warning/warning.js Error: ENOENT: no such file or directory, open

I install yarn add react-router-dom and it shows error when import "react-router-dom" Error message ./node_modules/react-router-dom/node_modules/warning/warning.js Error: ENOENT: no such file or...

How to persist Auth0 login status in browser for React SPA

Currently when I create my routes, I check an Auth0 method - isAuthenticated() - to determine whether or not to return a protected page or redirect to login. However, this state only exists in...

Deploying Reactjs website on github pages with routing results in 404 error on refresh

I've created a ReactJS webpage with multiple routes using BrowserRouter and deployed in via GitHub pages with its own domain. The website works perfectly as intended, however, when I refresh the...

SyntaxError: unknown: Namespace tags are not supported by default

I get the following error when trying to download svg as a React Component. SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can...

Animating route transitions with CSSTransitionGroup and React-Router v6

I'm starting to use React-Router v6, and running into issues animating route transitions. Both the react-router docs and the react-transition-group docs specify ways that are not compatible with...

Cannot destructure property of object from context

Re-posting a similar question to my last because of a new issue. I'm trying to use context with hooks to manage authentication in my react app. I'm getting the error TypeError: Cannot destructure...

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: Component, ...props }) => { if...

React navigate router v6 invalid hook call

Im trying to redirect my user when the user is logged in. but all my methods i found so far wont work. etg im trying to use useNavigate function using react router v6. but for some reason i get...

Antd Form with React hook form

I am trying to use antd form with react-hook-form but couldn't get it to work. Basically I am using a theme with antd and want to integrate react-hook-form for better validation and other things....

Error: StateProvider(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

I have this error as Error: StateProvider(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. And it is coming due to this...

How can I exclude some routes from UseStatusCodePagesWithReExecute?

I have a full-stack app in ASP.NET Core 5. The front-end is React and the back-end is OData. I need to use app.UseStatusCodePagesWithReExecute("/"); in my Configure() method to redirect any...

ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (2:9)

I am trying to use eslint in webstorm, but it doesn't work and displays an error:ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx,...

adding class active to other parent html tag with react router

I have been stuck for hours to figure out how to add classActive on the parent html tag of the provided reactrouter tag. Here is the code, Using React-Router "version": "3.2.6" <li...

ThemeProvider does not apply theme to child components from material ui library

I am using Typescript, React. Material-UI (now MUI) and Webpack. I am trying to apply a theme using material-ui's ThemeProvider but it only seems to apply that theme to components that are not...

You cannot render a <Router> inside another <Router>. You should never have more than one in your app

import { BrowserRouter, Routes, Route } from "react-router-dom"; //Layouts import HomeLayoutRoute from "./components/layouts/HomeLayout"; //components import Home from...

"Cannot read properties of undefined (reading 'pathname')" when testing pages in the v6 React Router

When testing components with <Link>s, for example in my answer to https://stackoverflow.com/q/65270992/3001761, I often use the following pattern to get access to the current location for testing...

Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

I'm using react router v6 and creating private routes for my application. In PrivateRoute.js, i've code import React from 'react'; import {Route,Navigate} from "react-router-dom"; import {isauth} ...

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

Failed to compile. Attempted import error: 'withRouter' is not exported from 'react-router-dom'. My code like, also I have installed react-router-dom an react-route and I have respin the app 10...

Configure imports relative to root directory in create-react-library library

I am trying to setup a react component library with create-react-library (which uses rollup under the hood) and port over our application's existing component library so that we can share it...

Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

I have recently upgraded my app from SDK 40 to SDK 44 and came across this error App.js: [BABEL]: Unexpected token '.' (While processing:...

VSCode prettier adds `value` to imports in TypeScript React

After configuring prettier with the plugin in VSCode the format on save function adds weird value keywords to every non-default import in my React+TS code. Like this: import { value ApolloProvider...