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

Question

我正在尝试获取最基本的 hookrouter 示例（react-router-dom 的替代路由库）工作，但无法更改页面。当我单击 /about 链接但 UI 不会更新时，URL 地址将更改为 /about。我将它与一个全新的 create-react-app 项目一起使用。我在 StackBlitz 上尝试了同一个项目，并注意到在安装 hookrouter 后，它说“url”库缺少一个包/依赖项……这很有趣，因为 url 包不是 hookrouter 的依赖项。但是第二次我在 StackBlitz.io 上安装了 url 包，当 url 更改时，链接工作并且 UI 相应地更新。我尝试在我的本地 create-react-app 项目上安装 url 库，但没有解决问题。所以我不确定是否缺少依赖项，但我可以看到 useRoutes 钩子在 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不适用于最新版本的 CRA 中默认启用的严格模式。（我猜 StackBlitz 和 codeandbox 也是如此）

您只需要从index.js 中删除该<React.StrictMode>组件

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

代码沙盒地图

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