在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: undefined
match:
params: {
}
path: “/about”
url: “/about”
常用的路由组件有哪些
-
BrowserRouter
:这个组件用于包装整个应用程序,并为应用程序提供路由功能。 -
Route
:这个组件用于定义应用程序中的路由。它有两个属性:path
和component
。path
属性用于定义路由的URL
路径,component
属性用于指定匹配路由时应该渲染的组件。 -
Switch
:这个组件用于包装一组Route
组件,并确保只有一个Route
组件被渲染。当您有多个路由匹配相同的URL
路径时,这非常有用。 -
Link
:这个组件用于在应用程序的不同路由之间创建链接。它有一个to
属性,用于指定链接的URL
路径。 -
NavLink
: 一个特殊版本的Link
,当它与当前URL
匹配时,为其渲染元素添加样式属性。
详情参考: