一次react從0開始建站體驗及各類填坑--開發中遇到的各類問題

接上文：一次react從0開始建站體驗及各類填坑--開始前的準備

這裏記錄一些實際開發中遇到的一些問題的解決方法，大量代碼預警

一、多頁面及連接

假設有兩個頁面，分別是Homepage和Aboutus，Homepage是首頁，創建目錄和文件：src/pages/Homepage/index.js、src/pages/Aboutus/index.js

修改 src/App.js

import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';

import Homepage from './pages/Homepage';
import Aboutus from './pages/Aboutus';

export default class App extends Component {
    render() {
        return (
            <Router history={createBrowserHistory()}>
                <Switch>
                    <Route extra path="/" component={Homepage} />
                    <Route extra path="/Aboutus" component={Aboutus} />
                </Switch>
            </Router>
        )
    }
}

src/pages/Homepage/index.js 代碼以下

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Homepage extends Component {

    //...
    
    render() {
        return(
            <div>
                <Link to="/Aboutus">連接到Aboutus</Link>
            </div>
        )
    }
}

二、上拉加載更多

import React, { Component } from 'react';

let timeoutId

export default class Homepage extends Component {

    state = {
        isLoading: false
    }
    
    componentDidMount() {
        window.addEventListener('scroll', this.bindLoadMore)
        //監聽瀏覽器滾動
    }
    
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindLoadMore)
        //離開頁面後取消監聽瀏覽器滾動
    }
    
    bindLoadMore = () => {
        if (!this.state.isLoading) {
            if (timeoutId) clearTimeout(timeoutId)
            timeoutId = setTimeout(this.loadMore, 50)
        }
    }
    
    loadMore = () => {
        const loadMore = this.refs.loadMore
        if(loadMore){
            const top = loadMore.getBoundingClientRect().top,
                windowHeight = window.screen.height
            if (top && top < windowHeight) {
                this.loadData()
            }
        }
    }
    loadData = () => {
        //...
        //加載數據
    }
    
    //...
    
    render() {
        return(
            <div>
            
                ...
            
                {
                    this.state.isLoading?
                    <div>正在載入…</div>
                    :
                    <div ref="loadMore" onClick={this.loadData}>加載更多</div>
                }
            
                ...
            
            </div>
        )
    }
}

三、判斷是否爲移動端

var isMob=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?true:false;

四、設置404頁面

創建目錄和文件：src/pages/Page404/index.js，在src/App.js中增長

...
import Page404 from './pages/Page404';
...

export default class App extends Component {
    render() {
        return (
            <Router history={createBrowserHistory()}>
                <Switch>
                    <Route extra path="/" component={Homepage} />
                    <Route extra path="/Aboutus" component={Aboutus} />
                    ...
                    <Route exact path="*" component={Page404} />
                </Switch>
            </Router>
        )
    }
}