title: How to force a route in React
body: <p>I am trying to follow this SO <a href="https://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link/#35354844">Answer</a> to &quot;go home&quot; after I close my Modal...</p>
  <pre><code>import React, { Suspense, useState } from 'react';
  import { BrowserRouter, Route, Switch, useHistory } from &quot;react-router-dom&quot;;
  import './App.css';
  import { Button } from 'reactstrap';
  import Slideshow from './components/Slideshow.js';
  import LogoHeader from './components/LogoHeader';
  import Login from &quot;./components/Login/Login.js&quot;;
  import ChangePassword from &quot;./components/Login/ChangePassword.js&quot;;
  import useToken from &quot;./components/useToken&quot;;
  import NewFooter from &quot;./components/NewFooter&quot;;
  import GetCategories from &quot;./components/GetCategories&quot;;
  import { formatter } from './components/common.js'
  import { GetCart, Increment, Decrement } from './components/ShoppingCart/CartHandler.js'
  import CheckoutModal from './components/ShoppingCart/CheckoutModal.js'
  
  const FeaturedCards = React.lazy(() =&gt; import('./components/featuredCards'));
  const ProdCard = React.lazy(() =&gt; import('./components/productCards'));
  const Portal = React.lazy(() =&gt; import('./components/Portal/portal'));
  
  function App() {    
      const { token, setToken } = useToken();
      const [cart, setCart] = useState(GetCart());
      const [isOpen, setIsOpen] = useState(false);
      const history = useHistory();
  
      if (!token) {
          return &lt;Login setToken={setToken} /&gt;
      }
      
      if (token.forcePasswordChange === true) {
          return &lt;ChangePassword setToken={setToken} /&gt;
      }
  
      function handleIncrementClick(item) {
          Increment(item.ItemNumber, cart);
          setCart(GetCart);
      }
  
      function handleDecrementClick(item) {
          Decrement(item.ItemNumber, cart);
          setCart(GetCart);
      }
  
      let onRequestClose = () =&gt; {
          setIsOpen(false);
          setCart(GetCart);
          history.push('/')
      }
  
      let handleClick = () =&gt; {
          setIsOpen(true)        
      }
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;BrowserRouter&gt;
                  &lt;p className=&quot;greeting&quot;&gt;Hello, {token.firstName}&lt;/p&gt;
                  &lt;LogoHeader /&gt;
                  &lt;GetCategories /&gt;                
                  &lt;Switch&gt;
                      &lt;Route path=&quot;/cart&quot;&gt;
                          &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                              &lt;div&gt;
                                  &lt;table className=&quot;table table-striped table-bordered&quot;&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th className=&quot;number&quot;&gt;Item Number&lt;/th&gt;
                                              &lt;th className=&quot;price&quot;&gt;Price&lt;/th&gt;
                                              &lt;th className=&quot;quantity&quot;&gt;Quantity&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody&gt;
                                          {cart.map(item =&gt;
                                              &lt;tr key={item.ItemNumber}&gt;
                                                  &lt;td&gt;{item.ItemNumber}&lt;/td&gt;
                                                  &lt;td&gt;{formatter.format(item.Price)}&lt;/td&gt;
                                                  &lt;td&gt;{item.Quantity}&lt;/td&gt;
                                                  &lt;td&gt;&lt;Button className=&quot;BtnIncrement&quot; onClick={() =&gt; handleIncrementClick(item)}&gt;{'+'}&lt;/Button&gt;&lt;/td&gt;
                                                  &lt;td&gt;&lt;Button className=&quot;BtnDecrement&quot; onClick={() =&gt; handleDecrementClick(item)}&gt;{'-'}&lt;/Button&gt;&lt;/td&gt;
                                              &lt;/tr&gt;
                                          )}
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                                  &lt;Button onClick={() =&gt; handleClick()}&gt;Checkout&lt;/Button&gt;
                                  {isOpen ? &lt;CheckoutModal onRequestClose={onRequestClose} /&gt; : null}
                              &lt;/div&gt;
                          &lt;/Suspense&gt;
                      &lt;/Route&gt;
                      &lt;Route path=&quot;/portal&quot;&gt;
                          &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                              &lt;Portal /&gt;
                          &lt;/Suspense&gt;
                      &lt;/Route&gt;
                      &lt;Route path=&quot;/&quot;&gt;
                          &lt;Slideshow id=&quot;slideshow&quot; /&gt;
                          &lt;div id=&quot;productContainer&quot;&gt;
                              &lt;br /&gt;
                              &lt;h3&gt;Featured Products&lt;/h3&gt;
                              &lt;br /&gt;
                              &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                                  
                                  &lt;FeaturedCards setCartFunc={setCart} /&gt;
                                  
                              &lt;/Suspense&gt;
                              &lt;br /&gt;
                              &lt;h3&gt;Most Popular&lt;/h3&gt;
                              &lt;br /&gt;
                              &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                                  &lt;ProdCard /&gt;
                              &lt;/Suspense&gt;
                              &lt;br /&gt;
                              &lt;h3&gt;New Products&lt;/h3&gt;
                              &lt;br /&gt;
                              &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                                  &lt;ProdCard /&gt;
                              &lt;/Suspense&gt;
                          &lt;/div&gt;
                      &lt;/Route&gt;                               
                  &lt;/Switch&gt;
                  &lt;NewFooter /&gt;
              &lt;/BrowserRouter&gt;
          &lt;/div&gt;
      );
  }
  export default App;
  </code></pre>
  <p><strong>UPDATE</strong></p>
  <p>As requested, my <code>CheckoutModal</code>:</p>
  <pre><code>import React from 'react';
  import &quot;./Checkout.scss&quot;
  import AddressBlock from './AddressBlock';
  import PaymentBlock from './PaymentBlock';
  import ShippingBlock from './ShippingBlock';
  import TotalsBlock from './TotalsBlock';
  import { Modal, ModalHeader, ModalBody } from 'reactstrap';
  
  class CheckoutModal extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              name: 'React',
              shippingMethod: null
          };
      }    
  
      setShippingMethod(method) {
          this.setState(state =&gt; ({ ...state, shippingMethod: method }));
      }
  
      render() {
          const buttonStyles = {
              position: &quot;absolute&quot;,
              top: &quot;-35px&quot;,
              right: &quot;10px&quot;,
              border: &quot;0&quot;,
              background: &quot;none&quot;
          };        
  
          return (
              &lt;Modal id=&quot;checkout&quot;
                  isOpen
                  size='xl'&gt;
                  &lt;button onClick={this.props.onRequestClose} style={buttonStyles}&gt;x&lt;/button&gt;
                  &lt;ModalHeader className=&quot;header&quot;&gt;
                      Checkout                    
                  &lt;/ModalHeader&gt;
                  &lt;ModalBody&gt;                    
                      &lt;div className=&quot;row&quot;&gt;
                          &lt;AddressBlock /&gt;
                          &lt;ShippingBlock setShippingMethod={this.setShippingMethod.bind(this)} shippingMethod={this.state.shippingMethod}/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;row&quot;&gt;
                          &lt;PaymentBlock onRequestClose={this.props.onRequestClose} /&gt;
                          &lt;TotalsBlock /&gt;
                      &lt;/div&gt;
                  &lt;/ModalBody&gt;
              &lt;/Modal&gt;
          );
      }
  }
  export default CheckoutModal;
  </code></pre>
  <p>I am getting <code>history is undefined</code> from my function <code>onRequestClose</code>. I tried prepending <code>this</code> but that didn't work. Is this because <code>App.js</code> is not a class component or rather just a function? Any tips or suggestions would be greatly appreciated.</p>
  <p><em>nodejs 16.13.0</em></p>
  <p><em>react-router-dom 8.1.2</em></p>