当我使用 <a> 标签跟随路线时，React-Router 正在刷新页面

Posted 2023-02-21

【中文标题】当我使用 <a> 标签跟随路线时，React-Router 正在刷新页面

【英文标题】：React-Router is refreshing page when I follow a route using <a> tag

【发布时间】：2016-03-02 01:54:54

【问题描述】：

我正在构建一个包含指向预定义路由的链接的 React 应用程序。

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

路由可以正常解析，但会刷新页面，从而降低应用性能。如何避免重新渲染整个页面？

【问题讨论】：

Link 最终会调用history.pushState，这是在不导致页面刷新的情况下设置 URL。 developer.mozilla.org/en-US/docs/Web/API/History/pushState

【参考方案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>
    )
  
;

【讨论】：

这对静态网站生成也适用吗？

反应引导中的 NavItem href 怎么样？

NavItem 就像一个 所以它会重新加载页面

这是否意味着对于 React SPA 完全不鼓励使用 a href，并且在创建基本链接时始终替换为 link？例如a href 在所有情况下都会导致完全重新加载？

【参考方案2】：

第一个答案是正确的，但我没有从 react-router-dom 找到链接。这是我的情况：

import  Link  from 'react-router';

【讨论】：

不同版本的react-router：version 4: import Link from react-router-domversion 3 or before: import Link from react-router

它在早期版本中不可用，但在版本 4 及更高版本中您可以这样做import Link from 'react-router-dom'

【参考方案3】：

你需要：

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

【参考方案4】：

嗨语义 ui 反应示例

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

【讨论】：

如果使用 React-Bootstrap Nav.Link，这是正确的答案。从 react-router-dom 导入 NavLink。将href 更改为to 并添加as 属性：<Nav.Link to="/admin/account/" + business.id as=NavLink>Account</Nav.Link>

嗨@mcarson，你的回答是正确的，谢谢

【参考方案5】：

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