[英]React-Router is refreshing page when I follow a route using <a> tag
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?
如何避免重新渲染整个页面?
Fix the problem by using the <Link>
tag included with react-router.通过使用 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>
)
}
};
First answer was correct but I didn't found Link from react-router-dom.第一个答案是正确的,但我没有从 react-router-dom 找到链接。 It was in my case here:
就我而言,这里是:
import { Link } from 'react-router';
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
指定的BrowserRouter
,然后它会将您发送到那里。
Learn more here Reat Training / React Router在此处了解更多信息Reat Training / React Router
嗨语义ui反应示例
<Menu.Item name="NotFound" as={NavLink} to="/dadsadsa" />
In case the above methods don't work, check if you are importing the right component where you are defining the routes.如果上述方法不起作用,请检查您是否在定义路由的位置导入了正确的组件。 (In my case, I imported a component with the same name but from a wrong path)
(在我的例子中,我从错误的路径导入了一个同名的组件)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.