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
React-Router is refreshing page when I follow a route using <a> tag
提问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 BrowserRouter
and then it sends you there.
请注意,如果to="/Example"
匹配您在您中指定的路线BrowserRouter
,然后它会将您发送到那里。
Learn more here Reat Training / React Router
在此处了解更多信息Reat Training / React Router