說(shuō)明
實(shí)現(xiàn) 路由跳轉(zhuǎn)、redux
文件版本
“next”: “^4.2.3”,
“react”: “^16.2.0”,
“react-dom”: “^16.2.0”
Next.js GitHub 文檔
項(xiàng)目源碼
使用
Next.js 使用文件體統(tǒng)作為API，可以自動(dòng)進(jìn)行服務(wù)器端渲染和代碼分割
1. 安裝
2. package.json 中添加 npm script
3. 創(chuàng)建 /pages 文件夾，其中文件會(huì)映射為路由
/pages 文件夾是頂級(jí)組件文件夾 其中 /pages/index.js 文件會(huì)映射文 / 路由，其他文件根據(jù)文件名映射
每一個(gè)路由js文件都會(huì) export 一個(gè) React 組件，這個(gè)組件可以是函數(shù)式的也可以是通過(guò)集成 React.Component 得到的類(lèi)
4. 創(chuàng)建 /static 文件夾，存放靜態(tài)資源
靜態(tài)資源文件夾文件會(huì)映射到 /static/ 路由下，直接通過(guò) http://localhost:3000/static/test.png 訪(fǎng)問(wèn)
5. 使用內(nèi)置組件 定制每個(gè)頁(yè)面的 head 部分
6. 使用內(nèi)置組件 進(jìn)行路由跳轉(zhuǎn)
更多 Link 使用方式
7. 使用內(nèi)置 router 方法，手動(dòng)觸發(fā)路由跳轉(zhuǎn)
next/router 提供一套方法和屬性，幫助確認(rèn)當(dāng)前頁(yè)面路由參數(shù)，和手動(dòng)觸發(fā)路由跳轉(zhuǎn)
更好的方式使用路由 – router 的 withRouter 方法
8. 使用 next-redux-wrapper 插件輔助實(shí)現(xiàn) redux
1. 安裝依賴(lài)
2. 創(chuàng)建 initializeStore.js 一個(gè)可以返回 store 實(shí)例的函數(shù)
在這個(gè)文件中會(huì)完成裝載中間件、綁定reducer、鏈接瀏覽器的redux調(diào)試工具等操作
3. 創(chuàng)建 reducer , action
與普通 react-redux 項(xiàng)目創(chuàng)建 reducer, action 的方法一致，我把這部分代碼都提取到一個(gè)名為 modules的文件夾中
4. 頁(yè)面中使用
需要用到 next-redux-wrapper 提供的 withRedux 高階函數(shù)，以及 react-redux 提供的 connect 高階函數(shù)
【Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例】
推薦閱讀
- css多種方式實(shí)現(xiàn)等高布局的示例代碼
- mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能示例
- 支付寶實(shí)現(xiàn)北京公交地鐵乘車(chē)碼與健康碼自動(dòng)關(guān)聯(lián)
- jQuery實(shí)現(xiàn)圖片上傳和裁剪插件Croppie
- 純JavaScript基于notie.js插件實(shí)現(xiàn)消息提示特效
- vue中tab選項(xiàng)卡的實(shí)現(xiàn)思路
- 基于webpack4.X從零搭建React腳手架的方法步驟
- css實(shí)現(xiàn)文字居中兩邊橫線(xiàn)效果的示例代碼
- text-align:justify實(shí)現(xiàn)文本兩端對(duì)齊兼容IE
- 如何在 dopod 818 上實(shí)現(xiàn)收發(fā)傳真