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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33964566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 15:43:46  来源:igfitidea点击:

React-Router is refreshing page when I follow a route using <a> tag

javascriptreactjsreact-router

提问by Rick

I'm building a React app that has links pointing to predefined routes.

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

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

The routes resolve fine, but it's refreshing the page, thereby slowing down app performance. How do I avoid re-rendering the entire page?

路由解析得很好,但它正在刷新页面,从而降低了应用程序的性能。如何避免重新渲染整个页面?

回答by Rick

Fix the problem by using the <Link>tag included with react-router.

使用<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>
    )
  }
};

回答by Janne Harju

First answer was correct but I didn't found Link from react-router-dom. It was in my case here:

第一个答案是正确的,但我没有从 react-router-dom 找到链接。就我而言,这里是:

import { Link } from 'react-router';

回答by Edwin

You need to:

你需要:

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

then import the component you wish to go to

然后导入你想要去的组件

import Example from "./component/Example"

Then use Link like this

然后像这样使用链接

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

This will stop the refreshing.

这将停止刷新。

Note that, if to="/Example"matches a route you've specified in your BrowserRouterand then it sends you there.

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

Learn more here Reat Training / React Router

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