實戰react技術棧+express前後端部落格專案（2）-- 前端react-xxx、路由配置

Neal_yang發表於2017-09-30
ReactExpress後端前端路由

專案地址：github.com/Nealyang/Re…

本想等專案做完再連載一波系列部落格，隨著開發的進行，也是的確遇到了不少坑，請教了不少人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享當然是好的，
如果能做到集思廣益，那豈不是更美。我們的口號是：堅決不會爛尾

本部落格為連載程式碼部落格同步更新部落格，隨著專案往後開發可能會遇到前面寫的不合適的地方會再回頭修改。如有不妥~歡迎兄弟們不嗇賜教。謝謝！

react-redux 配置說明

reducer

首先我們在專案/app/reducers下新建一個index.js，用於匯出所有的reducer。
也用於將admin、front等reducer彙總的檔案。最後combineReducers後直接匯出。

export default combineReducers({
    front,
    globalState: reducer,
    admin
})複製程式碼

上面admin,reducer,front是別的檔案中的reducer處理。這裡我們可以暫時匯出一個空的state。

對應的每一個子reducer書寫大致如下：

export const actionTypes = {
    ADMIN_URI_LOCATION:"ADMIN_URI_LOCATION"
};

const initialState = {
    url:"/"
};

export const actions = {
    change_location_admin:function (url) {
        return{
            type:actionTypes.ADMIN_URI_LOCATION,
            data:url
        }
    }
};

export function reducer(state=initialState,action) {
    switch (action.type){
        case actionTypes.ADMIN_URI_LOCATION:
            return {
                ...state,url:action.data
            };
        default:
            return state
    }
}

const admin = combineReducers({
    adminGlobalState:reducer,
    users,
    tags
});

export default admin複製程式碼

定義initialState（這個state節點上的initialState，不總的state），actions，actionTypes以及reducer。然後倒入reducer。
在index中引入後，即為state中的admin節點。

configureStore

配置store的檔案。這個檔案的功能正如其名，就是配置store的。其中我們主要做了如下工作。

  • applyMiddleware->將一些中介軟體、reducer、裝在進去
  • 區分環境，判斷是否需要加入開發工具。如：devToolsExtension
  • 配合熱更新
  • createStore

程式碼如下：

const win = window;
const sagaMiddleware = createSagaMiddleware();
const middlewares = [];

let storeEnhancers ;
if(process.env.NODE_ENV==='production'){
    storeEnhancers = compose(
        applyMiddleware(...middlewares,sagaMiddleware)
    );
}else{
    storeEnhancers = compose(
        applyMiddleware(...middlewares,sagaMiddleware),
        (win && win.devToolsExtension) ? win.devToolsExtension() : (f) => f,
    );
}

export default function configureStore(initialState={}) {
    const store = createStore(rootReducer, initialState,storeEnhancers);
    sagaMiddleware.run(rootSaga);
    if (module.hot && process.env.NODE_ENV!=='production') {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept( './reducers',() => {
            const nextRootReducer = require('./reducers/index');
            store.replaceReducer(nextRootReducer);
        });
    }
    return store;
}複製程式碼

最後倒入store，用於在App中使用。

react-router 配置說明

react-router中的配置主要在/container/index.js檔案中。該檔案負責匯出所有路由中的檔案。

說一下該專案的路由大致規則。預設情況下，輸入域名（我們這裡是localhost），直接進入首頁。也就是我們專案中的front部分。

/ -> 首頁 （雖然說首頁，但是仔細看頁面結構，其實就是文章列表頁）
/:tag -> 其他文章列表頁
/detail/:id -> 詳情頁
/admin -> 後臺管理首頁
/admin/xxx -> 後臺管理頁的某一個模組 比如：/admin/managerTags -> 標籤管理頁面
/404 -> notFound 複製程式碼

所以根據路由配置先具體後模糊的規則。並且這裡牽涉到路由巢狀，所以必定抽離出元件來：

index.js render部分如下:

render() {
        let {isFetching} = this.props;
        return (
            <Router>
                <div>
                    <Switch>
                        <Route path='/404' component={NotFound}/>
                        <Route path='/admin' component={Admin}/>
                        <Route component={Front}/>
                    </Switch>
                    {isFetching && <Loading/>}
                    {this.props.notification && this.props.notification.content ?
                        (this.props.notification.type === 1 ?
                            this.openNotification('success', this.props.notification.content) :
                            this.openNotification('error', this.props.notification.content)) :
                        null}
                </div>
            </Router>
        )
    }複製程式碼

因為路由模糊的部分只要front部分是最模糊的，所以我們把它匹配到最下面。別的大家應該都沒有疑惑，至於isFetch notification後面會介紹。
至於為什麼要在這裡放這些isFetch和notification。因為這是所有路由的最外面一層，是front和admin介面下公共的部分。Loading載入圖示，全域性提示資訊都可以公用。
所以我們放在最外層。

一定記住。能公用的一組東西，我們一定是放到路由匹配的最外層。

下面看下Font和admin的程式碼

const Front = ({match}) => {
    return (
        <div>
            <div className={`${animationStyle.animated} ${animationStyle.fadeInDown}`}>
                <Banner/>
                <Menus/>
            </div>
            <Switch>
                <Route exact path={match.url} component={Home}/>
                <Route path={`/detail/:id`} component={Detail}/>
                <Route path={`/:tag`} component={Home}/>
                <Route component={NotFound}/>
            </Switch>
        </div>
    )
};複製程式碼

admin:

render() {
        const {url} = this.props.match;
        if(this.props.userInfo.userType){
            return (
                <div>
                    {
                        this.props.userInfo.userType === 'admin' ?
                            <div className={style.container}>
                                <div className={style.menuContainer}>
                                    <AdminMenu history={this.props.history}
                                               url={this.props.adminUrl}
                                               changeUrl={this.props.change_location_admin}/>
                                </div>
                                <div className={style.contentContainer}>
                                    <Switch>
                                        <Route exact path={url} component={AdminIndex}/>
                                        <Route path={`${url}/managerUser`} component={AdminManagerUser}/>
                                        <Route path={`${url}/managerTags`} component={AdminManagerTags}/>
                                        <Route path={`${url}/newArticle`} component={AdminNewArticle}/>
                                        <Route path={`${url}/detail`} component={Detail}/>
                                        <Route component={NotFound}/>
                                    </Switch>
                                </div>
                            </div> :
                            <Redirect to='/'/>
                    }
                </div>
            )
        }else{
            return <NotFound/>
        }

    }複製程式碼

注意admin中的路由匹配，這裡必須要使用{match},否則你點選link你會發現路由跳轉成功了，但是對應頁面沒有渲染。

關於admin中為什麼判斷this.props.userInfo後續許可權判斷哪裡會說到。以及會說這裡遇到的一些問題（重點）。這裡我們還是隻關注路由部分。再次強調，必須使用match
來取url。然後根據自己後臺管理的定義項，隨著開發，往後面去填充對應的路由即可。

結束語

至此，這個專案的redux，router基本就配置完成了。後續隨著開發，回往/app/reducers中在新增對應的reducer。以及在路由中新增新建的頁面。

如果您有更好想法，歡迎您聯絡我。我們一起改進~

如果有什麼不明白的地方，歡迎提issue。我會第一時間處理。

專案實現步驟系列部落格

  • [x] 實戰react技術棧+express前後端部落格專案（0）-- 預熱一波
  • [x] 實戰react技術棧+express前後端部落格專案（1）-- 整體專案結構搭建、state狀態樹設計
  • [x] 實戰react技術棧+express前後端部落格專案（2）-- 前端react-xxx、路由配置
  • 實戰react技術棧+express前後端部落格專案（3）-- 後端路由、代理以及靜態資源託管等其他配置說明
  • 實戰react技術棧+express前後端部落格專案（4）-- 部落格首頁程式碼編寫以及redux-saga組織
  • 實戰react技術棧+express前後端部落格專案（5）-- 前後端實現登入功能
  • 實戰react技術棧+express前後端部落格專案（6）-- 使用session實現免登陸+管理後臺許可權驗證
  • 實戰react技術棧+express前後端部落格專案（7）-- 前端管理介面使用者檢視功能+後端對應介面開發
  • 實戰react技術棧+express前後端部落格專案（8）-- 前端管理介面標籤管理功能+後端對應介面開發
  • 實戰react技術棧+express前後端部落格專案（9）-- 前端管理介面標籤管理功能+後端對應介面開發
  • 實戰react技術棧+express前後端部落格專案（10）-- 前端管理介面發表文章功能
  • 實戰react技術棧+express前後端部落格專案（11）-- 後端介面對應文章部分的增刪改查
  • 實戰react技術棧+express前後端部落格專案（12）-- 前端對於發文部分的完善（增刪改查、分頁等）
  • 實戰react技術棧+express前後端部落格專案（13）-- 前端對於發文部分的完善（增刪改查等）
  • 實戰react技術棧+express前後端部落格專案（14）-- 內容詳情頁以及閱讀數的展示
  • 實戰react技術棧+express前後端部落格專案（15）-- 部落格新增評論功能以及對應後端實現
  • 實戰react技術棧+express前後端部落格專案（16）-- pm2 的使用說明
  • 實戰react技術棧+express前後端部落格專案（17）-- 收工

交流

倘若有哪裡說的不是很明白，或者有什麼需要與我交流，歡迎各位提issue。或者加群聯絡我~

掃碼關注我的個人微信公眾號，直接回復，必有迴應。分享更多原創文章。點選交流學習加我微信、qq群。一起學習，一起進步

歡迎兄弟們加入：

Node.js技術交流群：209530601

React技術棧：398240621

前端技術雜談：604953717 (新建)

相關文章