We Keep Coding

× Error: Invalid hook call. Hooks can only be called inside of the body of a function component.[ReactJS]

am trying to build an Application using ReactJS but am getting this "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app"
I tried many method from Google but i won't worked still getting this error.
Please help me!
CODE
import React from 'react'
import { useHistory, useParams } from 'react-router-dom'
function ProductDetails() {
const { id } = useParams()
// const { setText } = props;
console.log(id)
return (
<div>
<h1>{id}</h1>
</div>
)
}
export default ProductDetails
App.js
import './App.css';
import {
BrowserRouter,
Switch,
Route,
Link
} from "react-router-dom";
import Header from './Components/Header';
import Homepage from './Components/HomePage';
import CartDetails from './Components/CartDetails';
import ProductDetails from './Components/ProductDetails';
import Error404 from './Components/Error404';
import { useState } from 'react';
function App() {
const [text, setText] = useState(0);
return (
<>
<BrowserRouter>
<Header text={text}/>
<Switch>
<Route exact path="/" component={Homepage} />
<Route exact path="/cart-details" component={()=> <CartDetails val={text} />} />
<Route exact path="/products-details/:id" component={ProductDetails} />
<Route
exact
path="/products-details/:id"
component={() => <ProductDetails setText={setText} />}
/>
</Switch>
</BrowserRouter>
</>
);
}
export default App;
package.json
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"react-dom": "^17.0.2",

you should put a parameter called props in the ProductDetails() component then only you can access the props from the parent component.
put like this
function ProductDetails(props) {
const { setText } = props;
....
}
Now you can use setText function inside the ProductDetails component.

React Router works only after refreshing the page

I am a bit new to react and I am facing a problem with the Router.
The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/contactus), but the content don't get updated (But if I do a refresh, it gets updated).
Here is my github repo:
https://github.com/Arefaat18/Project
Here is my MainComponent.js
import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRouter,BrowserRouter as Router} from 'react-router-dom';
import Header from './HeaderComponent';
import ContactUs from './ContactUsComponent';
import AboutUs from './AboutUsComponent';
import Home from './HomeComponent.js';
import {connect} from 'react-redux';
class Main extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Router>
<Header />
<TransitionGroup>
<CSSTransition classNames="page" timeout={300}>
<Switch>
<Route path="/home" component={Home} />
<Route exact path = "/contactus" component ={ContactUs} />
<Route exact path = "/aboutus" component ={AboutUs} />
<Redirect to="/home" />
</Switch>
</CSSTransition>
</TransitionGroup>
</Router>
</div>
);
}
}
export default withRouter(Main);
And here is my App.js file
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import {ConfigureStore} from './components/configureStore';
const store = ConfigureStore();
class App extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
</Provider>
);
}
}
export default App;
and here is the relevant dependancies
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-redux": "^7.2.1",
"react-redux-form": "^1.16.14",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.4",
And here is my ContactUsComponent, the other components are just the same with different text
import React, { Component } from 'react';
class ContactUs extends Component {
render(){
console.log("RENDER");
return (
<div>
<h1> Contact Us</h1>
</div>
);
}
}
export default ContactUs;
Thanks in advance.

Well I also stuck with the same Issue but in react 18 our component in index.js file is by default wrapped in react strict mode
like this:
<React.StrictMode>
<App/>
</React.StrictMode>
I removed React strict Mode tags then it worked perfectly fine for me

Right, you've extraneous Routers declared, your header component has one. Remove this Router.
It is because each Router provides a routing context, and each component subscribing to a routing context gets the context from the closest router. The router providing context to the header wasn't rendering any routes so that is why the URL would change but the router actually rendering the Routes wasn't being notified that it should render a different path.
class Header extends Component {
constructor(props) {
...
}
...
render() {
return (
<React.Fragment>
{/* <Router> */} // <-- Remove this Router Component
<Navbar dark expand="md">
...
</Navbar>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
...
</Modal>
{/* </Router> */}
</React.Fragment>
);
}
}

I ran into a similar problem. I used Link in the components, but I imported it from #reach/router.
As a result, I replaced
import { Link } from "#reach/router"
with
import { Link } from "react-router-dom"
in each component; and everything worked as it should

I just finish the course Front-End Web Development with React. I think you are learning this course too so I see nothing wrong with your code, possibly the problem is inside your ContactUs component. If you can provide your ContactUs code then I can debug it

I had the same issue as well but I had to wrap my App.js with BrowseRouter in the index.js file.
import {BrowserRouter as Router} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router>
<App />
</Router>
);

react-router-dom: Invalid hook call, Hooks can only be called inside of the body of a function component

I try to nest a route: I have a catalog of products in a Catalog component, which matches with url "backoffice/catalog".
I want to route to Edition component if the url matches with "backoffice/catalog/edit", but I need the Edition component to be a child of Catalog to share props.
I really don't understand why the nested route doesn't work, please save me ! And don't hesitate to tell me if anything is wrong with my App, I know JavaScript well, but I'm starting with React.
Here is my App component:
import React from "react";
import { Route, Switch } from "react-router-dom";
import { Home } from "./components/Static/Home.js";
import { Dashboard } from "./components/Backoffice/Dashboard.js";
import { Catalog } from "./components/Backoffice/catalog/Catalog.js";
import { Login } from "./components/Login/Login.js";
import { Signup } from "./components/Signup/Signup.js";
import { PrivateRoute } from "./components/PrivateRoute.js";
import "./scss/App.scss";
import {Header} from "./components/Structure/Header";
import {BOHeader} from "./components/Structure/Backoffice/Header";
import {List} from "./components/Listing/List";
function App()
{
return (
<div className="App">
<div className="App-content">
<Switch>
<Route path='/backoffice' component={BOHeader} />
<Route path='/' component={Header} />
</Switch>
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/login' component={Login} />
<Route exact path='/signup' component={Signup} />
<Route path='/listing' component={List}/>
<PrivateRoute exact path='/backoffice' component={Dashboard}/>
<PrivateRoute exact path='/backoffice/catalog' component={Catalog}/>
</Switch>
</div>
</div>
);
}
export default App;
Here is my Catalog component (the route is made in the render method:
import React from 'react';
import Data from '../../../Utils/Data';
import {Product} from './Product';
import {Edition} from './Edition';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
export class Catalog extends React.Component
{
state = {
title: '',
products: [],
editionProduct: null
};
obtainProducts = () =>
{
Data.products.obtain()
.then(products => {this.setState({products: products});})
};
editProductHandler = product =>
{
this.setState({editionProduct: product});
};
saveProductHandler = product =>
{
Data.products.save(product).then(() => {
this.state.products.map(item => {
item = item._id === product._id ? product : item;
return item;
})
});
};
deleteProductHandler = event =>
{
const productId = event.target.closest('.product-actions').dataset.productid;
let products = this.state.products.filter(product => {
return product._id !== productId;
});
this.setState({products: products}, () => {
Data.products.remove(productId);
});
};
displayProducts = () =>
{
return this.state.products.map(product => {
return (
<li key={product._id} className='catalog-item'>
<Product
deleteProductHandler={this.deleteProductHandler}
editProductHandler={this.editProductHandler}
data={product}
/>
</li>
)
});
};
componentWillMount()
{
this.obtainProducts();
}
render() {
const Products = this.displayProducts();
let { path, url } = useRouteMatch();
return (
<div className={this.state.editionProduct ? 'catalog edit' : 'catalog'}>
<h1>Catalog</h1>
<Switch>
<Route exact path={path}>
<ul className='catalog-list'>{Products}</ul>
</Route>
<Route path={`${path}/edit`}>
<Edition saveProductHandler={this.saveProductHandler} product={this.state.editionProduct} />
</Route>
</Switch>
</div>
);
}
}
Any ideas?

You can't use hooks inside Catalog component because it is a class component. So you have two ways to resolve your issue:
Rewrite your component from class to functional.
Do not use useRouteMatch inside Catalog component. If you need to get match data inside a component, you need to use withRouter high-order component.
So if you select second way, you will need to wrap your Catalog component in withRouter:
export default withRouter(Catalog);
Change one row in render function from:
let { path, url } = useRouteMatch();
To:
const { path, url } = this.props.match;
And do not forget to change the import of your Catalog component, because now your component exports as default.

As I had the same issue when setting up my React Router with Typescript, I will detail a little bit more Andrii answer in 4 steps:
1 - npm/yarn packages
yarn add react-router-dom --save
yarn add #types/react-router-dom --save-dev
or
npm install react-router-dom --save
npm install #types/react-router-dom --save-dev
2 - index.tsx
1) When importing your higher order component (App in the present case), do not use curly brackets as App will be exported as default;
2) BrowserRouter needs to be in a upper level rather the class that will be exported as "default withRouter(Class)", in order to prevent the following error:
"You should not use Route or withRouter() outside a Router"
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
import App from './app';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
3 - app.tsx
1) Import from react-router-dom, withRouter & RouteComponentProps (or your own PropType definition);
2) Extend React.Component and use the RouteComponentProps interface;
3) Pass the props to components you want to share routing data;
4) Export the higher order class as default withRouter.
import React, { ReactElement } from 'react';
import { Switch, Route, withRouter, RouteComponentProps } from 'react-router-dom';
import { ExpensesPage } from './pages/expenses/expenses.page';
import { HomePage } from './pages/home/home.page';
import { HeaderComponent } from './components/header/header.component';
import './app.scss';
class App extends React.Component<RouteComponentProps> {
public render(): ReactElement {
return (
<div className='playground'>
<HeaderComponent {...this.props} />
<div className="playground-content">
<Switch>
<Route exact path='/' component={HomePage} {...this.props} />
<Route exact path='/expenses' component={ExpensesPage} {...this.props} />
</Switch>
</div>
</div>
);
}
}
export default withRouter(App);
4 - header.component
Through your RouteComponentProps extending your class, you can access normally the routing props as history, location and match as bellow:
import React, { ReactElement } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import './header.component.scss';
export class HeaderComponent extends React.Component<RouteComponentProps> {
public render(): ReactElement {
const { location } = this.props;
console.log(location.pathname);
return (
<header className="header">
{/* ... */}
</header >
);
}
}
Hope it helps because I had a bit of challenge to make this works in a simple environment with webpack and no redux. Last time working properly with the following versions:
{
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"typescript": "^3.8.2",
"webpack": "^4.41.6",
"webpack-dev-server": "^3.10.3",
},
{
"#types/react-router-dom": "^5.1.3",
"webpack-cli": "^3.3.11"
}

Try adding useParams when you export like:
export default (props) => <NewComponent {...props} {...useParams()} />
Full example:
<Route exact path='/event/:id' element={<NewComponent />}/>
inport {useParams } from "react-router-dom";
class NewComponent extends React.Component {
render() {
return <div>{this.props.id}</div>
}
}
// Bind url parameters here
export default (props) => <NewComponent {...useParams()} {...props} />

this.props.children undefined when using react-router-redux

I have followed the react-router-redux example on the github page, but when I try to pass {this.props.children} to the IndexRoute and I try to log it, it's undefined.
The only error I get through the console is Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored, which by googling this error, it's just one of those errors that people say just ignore it since it doesn't affect any of the code (for some reason).
package.json
....
"react": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^4.0.0",
"react-router-dom": "^4.0.0",
"react-router-redux": "^4.0.8",
"redux": "^3.3.1",
"redux-thunk": "^1.0.3"
...
routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Items from "./components/Items"
import App1Container from "./containers/App1Container";
import ItemDetailContainer from "./containers/ItemDetailContainer";
export default (
<Route path="/" component={App1Container}>
<IndexRoute component={Items} />
<Route path="i/:id" name="item-detail" component={ItemDetailContainer} />
</Route>
);
App.jsx
import React from "react"
import { render } from "react-dom"
import {
createStore,
compose,
applyMiddleware,
combineReducers,
} from "redux"
import { Provider } from "react-redux"
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import { createBrowserHistory } from 'history';
import thunk from 'redux-thunk'
import * as reducers from './reducers'
import routes from './routes';
let finalCreateStore = compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
let reducer = combineReducers({
...reducers,
routing: routerReducer
});
let store = finalCreateStore(reducer);
const history = syncHistoryWithStore(createBrowserHistory(), store);
const router = (
<Provider store={store}>
<Router history={history}>{routes}</Router>
</Provider>
);
render(router, document.getElementById('App'));
App1Container.jsx
import React from "react"
import Radium from "radium"
import { connect } from "react-redux"
import Headline from "../components/Headline"
#connect(state => ({
items: state.items,
}))
#Radium
export default class App1Container extends React.Component {
render() {
console.log(this.props.children)
return (
<div>
{/* just a an h1 tag with some text in it */}
<Headline/>
{this.props.children}
</div>
)
}
}
App1Container would render the Headline component successfully but not this.props.children.

In react-router v4 you no longer nest routes.
<Route path="/" component={App1Container}>
<IndexRoute component={Items} />
<Route path="i/:id" name="item-detail" component={ItemDetailContainer} />
</Route>
Move your routes into your App1Container considering you always want it displayed. Then in your App1Container, add routes as follows:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route path="/" exact component={ Items } />
<Route path="/i/:id" name="item-detail" component={ ItemDetailContainer } />
</Switch>
</Router>

react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined

I've been having some trouble with react router (i'm using version^4.0.0).
this is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, Link, browserHistory } from 'react-router';
ReactDOM.render(
<Router history={browserHistory} >
<Route path="/" component={App} />
</Router>,
document.getElementById('root')
);
the App.js is just anything. i'm posting the basic one here, cause it's not the problem (i believe)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
and this is what happens when i check the console log
Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined
at new Router (Router.js:43)
at ReactCompositeComponent.js:295
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
oh, and this is the package.json just in case
{
"name": "teste2",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^4.0.0"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
i've been checking this on other places, but i didn't find a way to solve it.
Thank you guys very much for your patience and help!!

You're doing a few things wrong.
First, browserHistory isn't a thing in V4, so you can remove that.
Second, you're importing everything from react-router, it should be react-router-dom.
Third, react-router-dom doesn't export a Router, instead, it exports a BrowserRouter so you need to import { BrowserRouter as Router } from 'react-router-dom.
Looks like you just took your V3 app and expected it to work with v4, which isn't a great idea.

Replace
import { Router, Route, Link, browserHistory } from 'react-router';
With
import { BrowserRouter as Router, Route } from 'react-router-dom';
It will start working.
It is because react-router-dom exports BrowserRouter

I've tried everything suggested here but didn't work for me. So in case I can help anyone with a similar issue, every single tutorial I've checked is not updated to work with version 4.
Here is what I've done to make it work
import React from 'react';
import App from './App';
import ReactDOM from 'react-dom';
import {
HashRouter,
Route
} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
<div>
<Route path="/" render={()=><App items={temasArray}/>}/>
</div>
</HashRouter >
), document.getElementById('root'));
That's the only way I have managed to make it work without any errors or warnings.
In case you want to pass props to your component for me the easiest way is this one:
<Route path="/" render={()=><App items={temasArray}/>}/>

location from the useLocation hook or from the useHistory hook is referencing the BrowserRouter from react-router-dom
So only call useLocation and useHistory from children components so this code below will work
#src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter,Switch, Route, } from "react-router-dom";
ReactDOM.render(
<>
<BrowserRouter>
<Switch>
<Route>
<App />
<Route>
</Switch>
</BrowserRouter>
</>,
document.getElementById("root")
);
then in your App.js you can get location by the useLocation hook or useHistory
since it's a child of the BrowserRouter it will be defined
eg. const { location} = useHistory();
eg. const loction = useLocation();

so if you need want use this code )
import { useRoutes } from "./routes";
import { BrowserRouter as Router } from "react-router-dom";
export const App = () => {
const routes = useRoutes(true);
return (
<Router>
<div className="container">{routes}</div>
</Router>
);
};
// ./routes.js
import { Switch, Route, Redirect } from "react-router-dom";
export const useRoutes = (isAuthenticated) => {
if (isAuthenticated) {
return (
<Switch>
<Route path="/links" exact>
<LinksPage />
</Route>
<Route path="/create" exact>
<CreatePage />
</Route>
<Route path="/detail/:id">
<DetailPage />
</Route>
<Redirect path="/create" />
</Switch>
);
}
return (
<Switch>
<Route path={"/"} exact>
<AuthPage />
</Route>
<Redirect path={"/"} />
</Switch>
);
};

appBar: {
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
backgroundColor: '#fff' // add the styles here
}
if you already have appBar at useStyles you can add the styles you just want.

It should be
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom;
Make sure they follow each other in that sequence.
That works for me though