一. 组件区别
- 写法不同
一般组件:<Demo/>
路由组件:<Route path='/demo' component={Demo} />
- 存放位置不同(规范的)
一般组件:components
路由组件:pages
- 接收到的 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: "/demo" url: "/demo"
二. 组件实例
-
路由组件
import React, { Component } from "react"; import { Link, Route } from "react-router-dom"; import Home from "./pages/Home"; export default class App extends Component { render() { return ( <div> {/* 路由跳转 */} <Link to="/home">Home</Link> <hr /> {/* 注册路由 */} <Route path="/home" component={Home} /> </div> ); } }
import React, { Component } from "react"; export default class Home extends Component { render() { console.log(this.props); return <div>Home</div>; } }
props打印结果:
-
一般组件
import React, { Component } from "react"; import Home from "./pages/Home"; export default class App extends Component { state = { carObj: { name: "奔驰", color: "白色", price: "100万", }, }; render() { return ( <div> {/* 一般组件 */} <Home {...this.state.carObj} /> </div> ); } }
import React, { Component } from "react"; export default class Home extends Component { render() { console.log(this.props); return <div>Home</div>; } }
props打印结果: