当我使用<a>标签跟踪路线时,React-Router是刷新页面

Question

我正在构建一个具有指向预定义路由的链接的React应用程序.

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

路由解析正常,但它刷新了页面,从而降低了应用程序性能.如何避免重新渲染整个页面？

Answer 1

通过使用<Link>react-router附带的标记来解决问题.

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

你需要：

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

然后导入你想要去的组件

import Example from "./component/Example"

然后像这样使用链接

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

这将停止刷新。

请注意，如果to="/Example"与您在 中指定的路线匹配，BrowserRouter则会将您发送到那里。

在此处了解更多Reat Training / React Router