TS cannot find modules

I have used https://github.com/FountainJS/generator-fountain-webapp to set up a new project using React & Typescript. I'm pretty comfortable with JS having used node for an ongoing project, but...

React.createElement: type is invalid -- expected a string

Trying to get react-router (v4.0.0) and react-hot-loader (3.0.0-beta.6) to play nicely, but getting the following error in the browser console: Warning: React.createElement: type is invalid --...

How to get query parameters in react-router v4

I'm using react-router-dom 4.0.0-beta.6 in my project. I have a code like following: <Route exact path="/home" component={HomePage}/> And I want to get query params in HomePage component. I've...

How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?

I was trying to create a <PrivateRoute> as describe in the react-router documents using TypeScript. Can anyone help me out? The privateRoute in react-router document: const PrivateRoute = ({...

Can I use href tag in reactjs?

I want to redirect a page in reactjs and for that I want to use href tag can I do that? Here is the code for reference: import React, { Component } from 'react'; import { BrowserRouter as Router,...

Webpack - Why is my bundle.js file minified by default?

I am learning react, and the online course I am following uses webpack. I didn't add any minifying or uglyfying options to my webpack.config but still my bundle.js is minified. I am not sure why...

Changing URL onClick in ReactJS

In my project I have a TabComponent which displays 3 tabs: home, popular, all. Now, I am using context of react to maintain: activetab which stores current tab. toggleTab method which changes...

"Unknown word" error showing after adding postcss-loader

I am trying to add postcss loader in my webpack but after adding postcss loader showing Unknown word error. I also attached error screenshot. please find attachment. Not sure what error is.... I...

React: Delete cookie when user closes the browser

I'm using the library react-cookie (https://www.npmjs.com/package/react-cookie) and I want to delete the user cookies when the browser or tab is closed. I used ComponentWillUnmount in my...

My react project not working after deploy to firebase hosting

I'm following the instruction of this site and I'm already trying with an empty create-react-app project and It's working fine But when I'm trying with my existing project after deploy process was...

How do I setup routing for react in GAE? Directly routing to react-router-dom routes via URL fails in GAE on basic create-react-app?

ANSWER for now This was tough for me to get exactly right. Very little in the way of guidance via Google. I hope this helps others. As Dan Cornilescu pointed out, the handlers accept the first...

How to create dynamic routes with react-router-dom?

I learn react and know, how to create static routes, but can't figure out with dynamic ones. Maybe someone can explain, I'll be very grateful. Let there be two components, one for rendering...

How to restrict access to routes in react-router-dom based on session?

I have a React front-end and Python back-end with user session management using flask-login's HttpOnly Session Cookies. How can I restrict react-router-dom routes based on this type of session...

Testing useSubscription apollo hooks with react

Testing the useSubscription hook I'm finding a bit difficult, since the method is omitted/not documented on the Apollo docs (at time of writing). Presumably, it should be mocked using the...

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...

Attempted import error: 'useHistory' is not exported from 'react-router-dom'

useHistory giving this error: Failed to compile ./src/pages/UserForm/_UserForm.js Attempted import error: 'useHistory' is not exported from 'react-router-dom'. This error occurred during the...

How to pass params into link using React router v6?

This is my main section class where all routes to the links is kept export default class Section extends React.Component { render() { return ( <div...

Animated react routes not working with <Switch> component

I am trying to build a simple router for my React application, which would consist of a few routes generated from an array of objects and a static 404 route. The requirement is that transitions...

React not rendering correctly layout after redirect

I have an app that uses styled-components and material-ui. I have private routes configurated, based on the user role and if the user is not authenticated I should return him to login page. But...

react-router v6: get path pattern for current route

Is it possible to get the path pattern for the currently matched route? Example: <Route path=":state/:city*" element={ <Page /> } /> // Page.jsx function Page() { ... //...

React js: Error: useLocation() may be used only in the context of a <Router> component

im using react router v6 and i every time i use initializing for authentication in my main file it shows this error. i cant find a solution in the internet for it. i want to render some routes...

React Nested Routing with React Bootstrap Tabs

I wanted to add routing to my gallery. I am using Bootstrap Tabs on my page, and each tab has a different Carousel for a different category of pictures. I want to add routing so that the user...

Navigate through child routes using react-router-dom V6

I am using react-router-dom V6 both Routes and useRoute, So, in the site, the main routes are as follow: export default function App() { return ( <Routes> <Route path="/"...

Unable to go back on React Router v6

I am experimenting with react-router-dom-6 and I have trouble going back to previous pages. The sample app can Go Back from the "Report Page" to "About Page" However, it can't Go Back from the...

React Formik Material-UI Autocomplete Multiple: how to submit multiple selected values on submit

im trying to figure out how to use Material-UI Autocomplete with Formik. Here ive created a form which displays 3 question fields per page, which is working fine. Since im very new to this and...

Passing props to <Outlet /> when nestining routes in React Router v6?

How can I pass props to the <Outlet /> component when I am nestin routes? // Parrent Comp { const [format, setFormat] = useState('rgb'); const color = [hex, rgb, rgba] // ... return ( ...

react with TS - useNavigate() with react-router-dom v6

The App.tsx - import React from 'react'; import { useNavigate } from 'react-router'; import AppView from './App.view'; interface Props { } const App: React.FC<Props> = (props:...

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

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params') TypeError: Cannot read properties of undefined (reading 'params') 5 | import products from...

Using condition for redirecting in react router dom v6

I'm currently getting troubled with the react router [email protected] Like, I want to redirect users to other pages If they logged in. But when I use Navigate component It threw error saying that...

react-router some routes not matching

I have private routes app-routes.js file const routes = [ { path: '/', component: HomePage }, { path: '/articles/:id', component: Article }, { path: '/expert', component: Experts }, ... { path:...