为什么我的 React-Router-Dom 链接组件在 URL 更改后没有渲染正确的组件？

React-Router-Dom 中的链接标签问题

React-router-dom 提供了一个 Link 组件，用于在单个页面之间导航页面应用程序。但在某些情况下，用户会遇到点击 Link 标签改变 URL 但无法渲染相应组件的问题。

说明：

问题源于react-router-dom@5和React@18版本之间的兼容性问题。具体来说，react-router-dom 5.3.3 之前的版本与 React 18 不完全兼容。

解决方案：

要解决此问题，可以使用以下方法之一：可以应用以下解决方案：

1.更新React-Router-Dom：

• 更新到react-router-dom版本5.3.3或更高版本。此版本修复了此兼容性问题。

npm uninstall -S react-router-dom
npm install -S react-router-dom@5.3.3

2.恢复到 React 17：

• 降级到 React 17 或在 index.js 文件中使用 React 17 语法。

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById(&quot;root&quot;)
);

3.嵌套 React.StrictMode：

• 将 React.StrictMode 组件移动为路由器组件的子组件。

<BrowserRouter>
  <React.StrictMode>
    ...
  </React.StrictMode>
</BrowserRouter>

4.升级到React-Router-Dom 6：

• 升级到最新版本的react-router-dom（版本6或更高版本）并相应调整路由语法。

以上是为什么我的 React-Router-Dom 链接组件在 URL 更改后没有渲染正确的组件？的详细内容。更多信息请关注PHP中文网其他相关文章！