react 使用react-router-dom 在Route对象上component 参数接收的是一个方法而非一个对象

其实对于jsx语法 一直觉的它有点清晰都不是很好，js和html混在一起有点不伦不类的样子，以下是我在使用react中遇到的一个很奇葩的事情

假定你定义了一个component Mine

 import React from 'react';

 class Mine extends React.Component {
     constructor(peops) {
         super();
     }

     render() {
         console.log('mine', this);
         return (
             <div>
                 <div className='head'>
                     <span>mine</span>
                 </div>
             </div>
         )
     }
 }

 export {Mine}

然后你在另一个组件上引用

import React from 'react'
import {Mine} from "../mine/mine";

class San extends React.Component {
    constructor(props) {
        super();
        this.state = {
            name: '第2个页面'
        }
    }

    componentDidMount() {
        console.log(typeof <Mine/>)//打印
        console.log(typeof Mine) //打印
    }

    render() {
        return (
            <div id={'san'}>
                {this.state.name}
            </div>
        )
    }
}

export {San}

你会发现第一个<Mine/>输出的是一个对象 而Mine输出的是一个方法 而在react-router-dom中使用

return (
            <HashRouter>
                <Switch>
                    <Route exact path={'/'} component={Mine}/> //没有问题

                    <Route exact path={'/'} component={<Mine/>}/> //报错

                    <Route exact path={'/mine2'} component={() => Mine;
                    }/> //报错

                    <Route exact path={'/mine2'} component={() => <Mine/>;
                    }/> //没有问题

                    <Route exact path={'/mine2'} component={() => new Mine();
                    }/> //没有问题

</Switch> </HashRouter> )

其原因就component 接收的是一个方法而不是一个对象 而这个方法返回的值必须是react组件;