Search code examples
reactjsonclickhrefwindow.location

React OnClick windows.location.href does not work

I'm struggling with fixing the simple onClick and redirecting to the specific path by clicking the DropdownItem. There is nothing that happens whenever I click the DropdownItem. Any hints, and advice would be appreciated!

Then path i wanted to redirect:

<Route path='/Sales-Ops-Diagnostic/Price-Mismatch' element={<MainComponent/>}/>

Here are my codes:

<CSSTransition
    in={activeMenu === 'Quote & Order Analysis'}
    timeout={500}
    classNames="menu-secondary"
    unmountOnExit
    onEnter={calcHeight}>
    <div className="menu">
      
      <DropdownItem goToMenu="Sales Ops Diagnostic" leftIcon={<ArrowIcon />}>
        <h3>Quote & Order Analysis</h3>
      </DropdownItem>
      <DropdownItem onClick={()=> window.location.href='/Sales-Ops-Diagnostic/Price-Mismatch'} leftIcon="💻">AMER Quote & Order</DropdownItem>
      <DropdownItem leftIcon="🗃️">EMEA Quote & Order</DropdownItem>
      <DropdownItem leftIcon="💡">APJ Quote & Order</DropdownItem>
    </div>
  </CSSTransition>
Solution

  • You need to use React Router to redirect to another page. Here is the documentation : https://reactrouter.com/docs/en/v6/getting-started/tutorial

    I suggest you this post, there are several ways to do it : Programmatically navigate using React router