第三十一章 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: undefined

match:
    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路由详解