React Location Router在Redux中更改状态后不工作

kjthegm6 于 2022-11-12 发布在 React

关注(0)|答案(1)|浏览(141)

我在React Typescript项目中使用了@tanstack/react-location + 'react-redux'。
当我改变redux auth状态（登录，注销）我也使我的主导航改变。一些链接被添加或删除。当它发生时，路由器停止工作。更新的链接是工作，网址是变化，但路由器是没有React。刷新后，路由器再次工作。
应用程序.tsx...

<Router
  location={reactLocation}
  routes={appRoutes}
  defaultPendingElement={<Spinner />}
  defaultPendingMs={10}
>
  <MainNavigation />
  <Outlet />
</Router>

MainNavigation.tsx

<header className="header">
  <Link to="/" getActiveProps={getActiveProps}>
    <div className="logo">RS Lang</div>
  </Link>
  <nav>
    <ul>
      <li>
        <Link to="/" getActiveProps={getActiveProps}>
          Home
        </Link>
      </li>
      <li>
        <Link to="/team" getActiveProps={getActiveProps}>
          Team{' '}
        </Link>
      </li>
      <li>
        <Link to="/textbook" getActiveProps={getActiveProps}>
          Textbook
        </Link>
      </li>
      {isLoggedIn && (
        <li>
          <Link to="/dictionary" getActiveProps={getActiveProps}>
            Dictionary
          </Link>
        </li>
      )}
      <li>
        <Link to="/games" getActiveProps={getActiveProps}>
          Games
        </Link>
      </li>
      {!isLoggedIn && (
        <li>
          <Link to="/auth" getActiveProps={getActiveProps}>
            Login|SignUp
          </Link>
        </li>
      )}
      {isLoggedIn && (
        <li>
          <Link to="/profile" getActiveProps={getActiveProps}>
            Profile {authState.user.name}
          </Link>
        </li>
      )}
      {isLoggedIn && (
        <li>
          <button type="button" onClick={logoutHandler}>
            Logout
          </button>
        </li>
      )}
    </ul>
  </nav>
</header>

redux

来源：https://stackoverflow.com/questions/73509274/react-location-router-doesnt-work-after-changing-state-in-redux

1条答案

按热度按时间

u7up0aaq1#

对我来说，问题是ReactLocation的定义不在main.tsx中。因此我这样修改了它：
main.tsx

export const reactLocation = new ReactLocation();

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

App.tsx

import { reactLocation} from './main.tsx';

export const App = () => {
  return <Router
    location={reactLocation}
    routes={appRoutes}
    defaultPendingElement={<Spinner />}
    defaultPendingMs={10}
  >
    <MainNavigation />
    <Outlet />
  </Router>
}

希望这对你有帮助：）（我使用Vite作为构建工具）

赞(0）回复(0）举报 2022-11-12

我来回答

React Location Router在Redux中更改状态后不工作

1条答案

相关问题

热门标签

最新问答