如何在路由更改后更改redux状态

我一直在尝试在react应用程序中更改路由时更改/重置redux状态

我想这样做的原因：
我有一个导航，我可以通过使用redux状态切换到可见/隐藏的按钮。这与预期的一样有效，但问题是当我走到不同的路线时，状态仍然是一样的。这样，导航仍然可见。我希望能够在路由更改后将redux状态更改为其初始状态

我的导航组件（Nav.js）如下所示：

import React from 'react'
import { NavLink } from 'react-router-dom'
import {
  MdMenu,
  MdKeyboardArrowDown
} from 'react-icons/md'

// Redux
import { useSelector, useDispatch } from 'react-redux'
import { toggleUserNav } from '../redux/actions/navActions'

const Nav = () => {
  const dispatch = useDispatch()
  const isAuthed = useSelector(state => state.user.authenticated)
  const userNavIsOpen = useSelector(state => state.nav.userNavIsOpen)

  const handleToggleUserNav = () => {
    dispatch(toggleUserNav())
  }

  let navLinks
  let userLinks

  if (!isAuthed) {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/om-poddifi">Om Poddifi</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <div><a href="/logga-in">Logga in förfan</a></div>
      </React.Fragment>
    )

  } else {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/min-lista">Min lista</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <button onClick={handleToggleUserNav} className="user-dropdown-btn">
          <div className="user-avatar"></div>
          <div className="user-name">Jonas</div>
          <div className="user-dropdown__arrow">
            <MdKeyboardArrowDown />
          </div>
        </button>
        <nav className={`user-nav ${userNavIsOpen ? 'isOpen' : ''}`}>
          <ul>
            <li>
              <NavLink className="user-nav__link" to="/">
                Min lista
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/min-lista">
                Redigera profil
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Inställningar
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Logga ut
              </NavLink>
            </li>
          </ul>
        </nav>
      </React.Fragment>
    )
  }

  return (
    <div className="top-bar">
      <div className="top-bar-inner">
        <div className="nav-toggle">
          <button
            onClick={handleToggleMainNav}
            className="nav-toggle__btn">
            <MdMenu />
          </button>
        </div>
        <div className="logo">
          <NavLink to="/">Poddifi</NavLink>
        </div>
        <ul className="main-nav">
          {navLinks}
        </ul>
        <div className="secondary-nav">
          {userLinks}
        </div>
      </div>
    </div>
  )
}

export default Nav

import { TOGGLE_MAIN_NAV } from '../types'

export const toggleMainNav = () => dispatch => {
  dispatch({ type: TOGGLE_MAIN_NAV })
}

我的导航操作（navActions.js）如下所示：

import React from 'react'
import { NavLink } from 'react-router-dom'
import {
  MdMenu,
  MdKeyboardArrowDown
} from 'react-icons/md'

// Redux
import { useSelector, useDispatch } from 'react-redux'
import { toggleUserNav } from '../redux/actions/navActions'

const Nav = () => {
  const dispatch = useDispatch()
  const isAuthed = useSelector(state => state.user.authenticated)
  const userNavIsOpen = useSelector(state => state.nav.userNavIsOpen)

  const handleToggleUserNav = () => {
    dispatch(toggleUserNav())
  }

  let navLinks
  let userLinks

  if (!isAuthed) {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/om-poddifi">Om Poddifi</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <div><a href="/logga-in">Logga in förfan</a></div>
      </React.Fragment>
    )

  } else {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/min-lista">Min lista</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <button onClick={handleToggleUserNav} className="user-dropdown-btn">
          <div className="user-avatar"></div>
          <div className="user-name">Jonas</div>
          <div className="user-dropdown__arrow">
            <MdKeyboardArrowDown />
          </div>
        </button>
        <nav className={`user-nav ${userNavIsOpen ? 'isOpen' : ''}`}>
          <ul>
            <li>
              <NavLink className="user-nav__link" to="/">
                Min lista
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/min-lista">
                Redigera profil
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Inställningar
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Logga ut
              </NavLink>
            </li>
          </ul>
        </nav>
      </React.Fragment>
    )
  }

  return (
    <div className="top-bar">
      <div className="top-bar-inner">
        <div className="nav-toggle">
          <button
            onClick={handleToggleMainNav}
            className="nav-toggle__btn">
            <MdMenu />
          </button>
        </div>
        <div className="logo">
          <NavLink to="/">Poddifi</NavLink>
        </div>
        <ul className="main-nav">
          {navLinks}
        </ul>
        <div className="secondary-nav">
          {userLinks}
        </div>
      </div>
    </div>
  )
}

export default Nav

import { TOGGLE_MAIN_NAV } from '../types'

export const toggleMainNav = () => dispatch => {
  dispatch({ type: TOGGLE_MAIN_NAV })
}

到目前为止我尝试做的事情：
我尝试过使用react router redux的“Location_CHANGE”，但没有成功

---

任何人都可以为我指出正确的方向如何继续？

您可以实现useLocation挂钩，它会在每次位置更改时更新。在位置更改时实施您的方案