React OnClick windows.location.href does not work

Question

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>

score 2 · Accepted Answer · answered Dec 18 '21 at 16:29

2

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

answered Dec 18 '21 at 16:29

devcarme

92
1
2

Thank you! Read through it and manage to resolve it by using another method called "useNavigate" – Raiden Choong Dec 19 '21 at 05:22

React OnClick windows.location.href does not work

1 Answers1