将 hookrouter 与 create-react-app 一起使用无法更新导航更改的视图

Question

我正在尝试让 hookrouter（react-router-dom 的替代路由库）的最基本示例正常工作，但无法更改页面。当我点击 /about link 但 UI 没有更新时，URL 地址将更改为 /about。我将它与一个全新的 create-react-app 项目一起使用。我在 StackBlitz 上尝试了同一个项目，并注意到在安装 hookrouter 后它说 'url' 库缺少 package/dependency ....这很有趣，因为 url 包不是hookrouter 的依赖。但是第二次我在 StackBlitz.io 上安装了 url 包，link 起作用了，UI 在 url 改变时适当地更新了。我尝试在我的本地 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 中默认启用的 Strict Mode。（我猜 StackBlitz 和 codesandbox 也是一样）

您只需从 index.js

中删除 <React.StrictMode> 组件

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

codesandbox枫

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

将 hookrouter 与 create-react-app 一起使用无法更新导航更改的视图

Using hookrouter with create-react-app fails to update the view on navigation change

reactjs

create-react-app

hookrouter