当我使用<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

如果上述方法不起作用，请检查您是否在定义路由的位置导入了正确的组件。 （在我的例子中，我从错误的路径导入了一个同名的组件）