React - 路由组件与一般组件的区别

一. 组件区别

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: "/demo"
   	url: "/demo"
   

二. 组件实例

1. 路由组件

   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打印结果：
   

2. 一般组件

   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打印结果：