當我使用<a>標簽</a>遵循路線時，React-Router 正在刷新頁面

Question

我正在構建一個 React 應用程序，其中包含指向預定義路由的鏈接。

<a href="/my/react/route/">Click Here</a>

路由解析得很好，但它正在刷新頁面，從而降低了應用程序的性能。 如何避免重新渲染整個頁面？

Answer 1

通過使用 react-router 中包含的<Link>標簽來解決這個問題。

import React from "react";
import { Link } from 'react-router-dom';

export class ToolTip extends React.Component {
  render() {
    return (
      <Link to="/My/Route">Click Here</Link>
    )
  }
};

Answer 2

第一個答案是正確的，但我沒有從 react-router-dom 找到鏈接。 就我而言，這里是：

import { Link } from 'react-router';

Answer 3

你需要：

import { Link } from "react-router-dom"

然后導入你想要去的組件

import Example from "./component/Example"

然后像這樣使用鏈接

<Link to="/Example">
   <h4>Example Page</h4>
</Link>

這將停止刷新。

請注意，如果to="/Example"匹配您在BrowserRouter指定的BrowserRouter ，然后它會將您發送到那里。

在此處了解更多信息Reat Training / React Router

Answer 4

嗨語義ui反應示例

             <Menu.Item name="NotFound" as={NavLink} to="/dadsadsa" />

Answer 5

如果上述方法不起作用，請檢查您是否在定義路由的位置導入了正確的組件。 （在我的例子中，我從錯誤的路徑導入了一個同名的組件）