reactjs - 使用带有 create-react-app 的 hookrouter 无法更新导航更改的 View

Question

我试图让 hookrouter(react-router-dom 的替代路由库)工作的最基本示例并且无法更改页面。当我单击/about 链接时，URL 地址将更改为/about，但 UI 没有更新。我将它与一个全新的 create-react-app 项目一起使用。我在 StackBlitz 上尝试了相同的项目，并注意到在安装 hookrouter 后，它说“url”库缺少一个包/依赖项……这很有趣，因为 url 包不是 hookrouter 的依赖项。但是第二次我在 StackBlitz.io 上安装了 url 包，链接工作正常，并且当 url 更改时 UI 会相应更新。我尝试在我的本地 create-react-app 项目上安装 url 库，但没有解决问题。所以我不确定是否缺少依赖项，但我可以看到 useRoutes Hook 在 URL 更改时实际加载更改，但无论出于何种原因 UI 都不会更新。这是我的 App.js 文件的代码。

import { A, useRoutes } from 'hookrouter';
import React from 'react';
import './App.css';
import { AboutPage } from './pages/AboutPage';
import { HomePage } from './pages/HomePage';

const routes = {
  '/': () => <HomePage />,
  '/about': () => <AboutPage />
}

function App() {
  const routeResult = useRoutes(routes);

  return (
    <div className="App">
      <A href="/">Home</A>
      <A href="/about">About</A>
      <header className="App-header">
        {routeResult}
      </header>
    </div>
  );
}

export default App;

Answer 1

看来hookrouter不适用于 Strict Mode在最新版本的 CRA 中默认启用。 (我猜 StackBlitz 和代码沙箱也是如此)

您只需删除 <React.StrictMode>来自您的 的组件index.js

<React.StrictMode>
  <App />
</React.StrictMode>

codesandbox枫

话虽如此，除非您有非常简单的应用程序，否则我鼓励您使用 react-router-dom因为这个包相对较新，你可能有更多不寻常的错误。