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挂钩实际上在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

在最新版本的CRA中默认启用的hookrouter与Strict Mode不兼容。（我想与StackBlitz和codesandbox相同）

您只需要从 index.js

中删除<React.StrictMode>组件

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

codesandbox动词

话虽如此，除非您真的有一个简单的应用程序，否则我建议您使用react-router-dom，因为此软件包是相对较新的，并且您可能会遇到许多不寻常的错误。

将Hookrouter与create-react-app一起使用无法在导航更改时更新视图

1 个答案: