第三十一章 React中路由组件和一般组件
在React中，组件是应用程序的构建块。它们是可重用的，可以用于创建复杂的UI。React中有两种类型的组件：路由组件和一般组件。
一般组件
一般组件是React应用程序的基本构建块。它们是可重用的，可以用于创建复杂的UI。它们不知道URL，也没有任何路由逻辑。它们只是根据传递给它们的props和state来呈现UI。
类似于下面的Header组件：
import React, { Component } from 'react'export default class Header extends Component {render() {console.log('这是Header组件的Props',this.props)return (<div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div>)}
}
他们在可以接收父组件传递给他们的自定义的标签属性props。
路由组件
路由组件是知道URL并具有路由逻辑的组件。它们负责根据当前URL呈现适当的UI。它们通常用于创建导航菜单、链接和其他依赖于当前URL的UI元素。
以下就是路由组件：
import { Link, Route } from 'react-router-dom'
//-------------------------------------------<Link className="list-group-item" to="/home">Home</Link><Link className="list-group-item" to="/about">About</Link>
//-------------------------------------------
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
在此示例中，使用了react-router-dom库中的Link组件来创建指向应用程序中不同页面的链接。当单击链接时，路由组件将根据当前URL呈现适当的UI。
路由组件与一般组件的区别
- 1、写法不同
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
- 2、存放位置不同
一般组件：一般放在**components目录**下面
路由组件：一般放在**pages目录**下面
- 3、接收到的Props不同
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：主要接收固定的三个属性（history、location、match）
history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)location:pathname: “/about”search: “”state: undefinedmatch:params: {}path: “/about”url: “/about”
常用的路由组件有哪些
-
BrowserRouter：这个组件用于包装整个应用程序，并为应用程序提供路由功能。 -
Route：这个组件用于定义应用程序中的路由。它有两个属性：path和component。path属性用于定义路由的URL路径，component属性用于指定匹配路由时应该渲染的组件。 -
Switch：这个组件用于包装一组Route组件，并确保只有一个Route组件被渲染。当您有多个路由匹配相同的URL路径时，这非常有用。 -
Link：这个组件用于在应用程序的不同路由之间创建链接。它有一个to属性，用于指定链接的URL路径。 -
NavLink: 一个特殊版本的Link，当它与当前URL匹配时，为其渲染元素添加样式属性。
详情参考：
印记中文-React Router
React路由详解