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組件;