title: react-router-dom: Invalid hook call, Hooks can only be called inside of the body of a function component
body: <p>I try to nest a route: I have a catalog of products in a <strong>Catalog</strong> component, which matches with url <em>&quot;backoffice/catalog&quot;</em>.</p>
  <p>I want to route to <strong>Edition</strong> component if the url matches with <em>&quot;backoffice/catalog/edit&quot;</em>, but I need the <strong>Edition</strong> component to be a child of <strong>Catalog</strong> to share props.</p>
  <p>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.</p>
  <p>Here is my App component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
      &lt;div className="App"&gt;
        &lt;div className="App-content"&gt;
            &lt;Switch&gt;
                &lt;Route path='/backoffice' component={BOHeader} /&gt;
                &lt;Route path='/' component={Header} /&gt;
            &lt;/Switch&gt;
            &lt;Switch&gt;
                &lt;Route exact path='/' component={Home} /&gt;
                &lt;Route exact path='/login' component={Login} /&gt;
                &lt;Route exact path='/signup' component={Signup} /&gt;
                &lt;Route path='/listing' component={List}/&gt;
                &lt;PrivateRoute exact path='/backoffice' component={Dashboard}/&gt;
                &lt;PrivateRoute exact path='/backoffice/catalog' component={Catalog}/&gt;
            &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my Catalog component (the route is made in the render method:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = () =&gt;
      {
          Data.products.obtain()
              .then(products =&gt; {this.setState({products: products});})
      };
  
      editProductHandler = product =&gt;
      {
          this.setState({editionProduct: product});
      };
  
      saveProductHandler = product =&gt;
      {
          Data.products.save(product).then(() =&gt; {
              this.state.products.map(item =&gt; {
                  item = item._id === product._id ? product : item;
                  return item;
              })
          });
      };
  
      deleteProductHandler = event =&gt;
      {
          const productId = event.target.closest('.product-actions').dataset.productid;
          let products = this.state.products.filter(product =&gt; {
              return product._id !== productId;
          });
          this.setState({products: products}, () =&gt; {
              Data.products.remove(productId);
          });
      };
  
      displayProducts = () =&gt;
      {
          return this.state.products.map(product =&gt; {
             return (
                  &lt;li key={product._id} className='catalog-item'&gt;
                     &lt;Product
                         deleteProductHandler={this.deleteProductHandler}
                         editProductHandler={this.editProductHandler}
                         data={product}
                     /&gt;
                 &lt;/li&gt;
              )
          });
      };
  
  
      componentWillMount()
      {
          this.obtainProducts();
      }
  
      render() {
          const Products = this.displayProducts();
          let { path, url } = useRouteMatch();
          return (
              &lt;div className={this.state.editionProduct ? 'catalog edit' : 'catalog'}&gt;
                  &lt;h1&gt;Catalog&lt;/h1&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path={path}&gt;
                          &lt;ul className='catalog-list'&gt;{Products}&lt;/ul&gt;
                      &lt;/Route&gt;
                      &lt;Route path={`${path}/edit`}&gt;
                          &lt;Edition saveProductHandler={this.saveProductHandler} product={this.state.editionProduct} /&gt;
                      &lt;/Route&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Any ideas?</p>