使用具有创建反应应用程序的挂钩路由器无法更新导航更改的视图。

Question

我正在尝试使最基本的例子挂钩路由器(另一种路由库的反应-路由器-多姆)工作，不能让页面改变。当我单击/about链接时，URL地址将更改为/about，但UI不会更新。我使用它与一个全新的创造-反应-应用程序项目。我在StackBlitz上尝试了相同的项目，并注意到在安装了钩子路由器之后，它说“url”library....which缺少一个包/依赖项，这很有趣，因为url包不是挂钩路由器的依赖项。但是，我第二次在StackBlitz.io上安装了url包，当url更改时，链接正常工作，UI进行了适当的更新。我试着在我的本地创建-反应-应用程序项目上安装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和codesandbox也是如此)

您只需将<React.StrictMode>组件从index.js中删除即可

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

码箱电子设备

尽管如此，除非您有非常简单的应用程序，否则我鼓励您使用react-router-dom，因为这个包是相对较新的，而且您可能有更多不寻常的bug。

Answer 2

不再工作使用这个：“react路由器-dom”