理解 React.js 中的链接

2020-10-08 08:00:00 · 飞浪

路由有助于确定访问 URL 时应运行哪些代码。在本指南中，您将详细了解 React 中的路由工作原理。

介绍

链接在网络上无处不在。它们对于定位网页、图片和视频等资源至关重要——更不用说它们在 SEO 中的重要性了。路由有助于确定访问 URL 时应运行哪些代码。在本指南中，您将了解有关 React 中路由工作原理的更多信息。

React 中的链接

在没有 React 等库的常规应用中，链接是使用锚标签创建的，如下所示。

      <a href="https://pluralsight.com">Visit Pluralsight</a>

请记住，这在 React 中也有效。这种路由方法会导致整个页面刷新，而实际上新路由上唯一改变的可能只是一张图片和一些文本。在某些情况下，整个页面刷新很有用，但在大多数情况下，这是不必要的。React 是一个面向组件的库，它通过以树的形式跟踪元素并找出哪些组件需要重新渲染来实现一种简洁的算法。React Router 等库利用这一点来帮助您的应用根据指定的路由渲染需要重新渲染的组件。非常高效，不是吗？

简而言之，如果您的应用对所有页面使用相同的页眉和页脚，那么您可以确保只有页面主体重新渲染，而页眉和页脚保持完整。

构建示例应用程序

通过输入以下命令或在浏览器中输入react.new来设置 React 应用程序，以在codesandox.io上设置 React 开发环境。

      npx create-react-app [YOUR_APP_NAME] && yarn add react-router-dom

将以下代码块添加到您的index.js 文件。

      import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import {Homepage, Aboutpage } from './App';

ReactDOM.render(
    <Router>
       <Switch>
		      <Route exact path="/" component={Homepage}/>
				<Route exact path="/about" component={Aboutpage }/>
	    </Switch>
    </Router>,
    document.getElementById('root')
);
    

现在将以下代码片段添加到您的App.js文件中，以创建页面的组件。

      import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
	return (
		<div>
				<p>Header</p>
		</div>
	)
};

const Homepage = () => {
	return (
		<div>
				<Header/>
				<h1>Homepage </h1>
				<Link to='/about'>Go to Aboutpage</Link>
		</div>
	)
};

const Aboutpage = () => {
	return (
		<div>
				<Header/>
				<h1>Aboutpage</h1>
				<Link to='/'>Go to Aboutpage</Link>
		</div>
	)
};
export {Homepage, Aboutpage } ;
    

运行您的开发服务器并在浏览器中打开您的应用。请注意，更改路由不会导致整个页面重新加载。

清理以避免不必要的渲染

您已利用路由为每个路由渲染特定组件。但某处存在问题 🤔。每次路由更改时， </Header>组件都必须渲染，但其内容不会更改。分别编辑您的App.js和index.js文件，如下所示。

      import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import {Homepage, Aboutpage, Header } from './App'; //new

ReactDOM.render(
    <Router>
       <Switch>
					<Header/> //new
		      <Route exact path="/" component={Homepage}/>
				<Route exact path="/about" component={Aboutpage }/>
	    </Switch>
    </Router>,
    document.getElementById('root')
);
    

      import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
	return (
		<div>
				<p>Header</p>
		</div>
	)
};

const Homepage = () => {
	return (
		<div>
				<h1>Homepage </h1>
				<Link to='/about'>Go to Aboutpage</Link>
		</div>
	)
};

const Aboutpage = () => {
	return (
		<div>
				<h1>Aboutpage</h1>
				<Link to='/'>Go to Aboutpage</Link>
		</div>
	)
};
export {Homepage, Aboutpage , Header } ; //new
    

您所做的是确保当访问新路线时，它只会呈现相应的页面而不是标题，因为它很少改变状态。

结论

呼！就是这样。现在你应该了解了 React 中的链接概念以及如何有效地处理路由。

如果您想就此话题进行更多讨论，请随时在 Twitter 上联系我 @DesmondNyamador 。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

理解 React.js 中的链接

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import {Homepage, Aboutpage } from './App'; ReactDOM.render( <Router> <Switch> <Route exact path="/" component={Homepage}/> <Route exact path="/about" component={Aboutpage }/> </Switch> </Router>, document.getElementById('root') );

import React from 'react'; import { Link } from 'react-router-dom'; const Header = () => { return ( <div> <p>Header</p> </div> ) }; const Homepage = () => { return ( <div> <Header/> <h1>Homepage </h1> <Link to='/about'>Go to Aboutpage</Link> </div> ) }; const Aboutpage = () => { return ( <div> <Header/> <h1>Aboutpage</h1> <Link to='/'>Go to Aboutpage</Link> </div> ) }; export {Homepage, Aboutpage } ;

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import {Homepage, Aboutpage, Header } from './App'; //new ReactDOM.render( <Router> <Switch> <Header/> //new <Route exact path="/" component={Homepage}/> <Route exact path="/about" component={Aboutpage }/> </Switch> </Router>, document.getElementById('root') );

import React from 'react'; import { Link } from 'react-router-dom'; const Header = () => { return ( <div> <p>Header</p> </div> ) }; const Homepage = () => { return ( <div> <h1>Homepage </h1> <Link to='/about'>Go to Aboutpage</Link> </div> ) }; const Aboutpage = () => { return ( <div> <h1>Aboutpage</h1> <Link to='/'>Go to Aboutpage</Link> </div> ) }; export {Homepage, Aboutpage , Header } ; //new