點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:02:22

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例:說明實(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，可以自動進(jìn)行服務(wù)器端渲染和代碼分割 1. 安裝 yarn

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例:說明實(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，可以自動進(jìn)行服務(wù)器端渲染和代碼分割 1. 安裝 yarn

說明

實(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，可以自動進(jìn)行服務(wù)器端渲染和代碼分割

1. 安裝

yarn add next react react-dom

2. package.json 中添加 npm script

 "scripts": {
 "dev": "next",
 "build": "next build",
 "start": "next start"
 },

3. 創(chuàng)建 /pages 文件夾，其中文件會映射為路由

/pages 文件夾是頂級組件文件夾其中 /pages/index.js 文件會映射文 / 路由，其他文件根據(jù)文件名映射

目錄結(jié)構(gòu)	映射路由
/pages/index.js	/
/pages/about.js	/about
/pages/home/index.js	/home
/pages/home/about.js	/home/about

每一個(gè)路由js文件都會 export 一個(gè) React 組件，這個(gè)組件可以是函數(shù)式的也可以是通過集成 React.Component 得到的類

export default () => <div>this is index page </div>;

4. 創(chuàng)建 /static 文件夾，存放靜態(tài)資源

靜態(tài)資源文件夾文件會映射到 /static/ 路由下，直接通過 http://localhost:3000/static/test.png 訪問

5. 使用內(nèi)置組件 <head> 定制每個(gè)頁面的 head 部分

 import Head from 'next/head'; // 引入內(nèi)置組件

 export default () => (
 <div>
 <Head>
 <title>index page</title>
 <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
 </Head>
 <div>this is index page</div>
 </div>
 );

6. 使用內(nèi)置組件 <Link> 進(jìn)行路由跳轉(zhuǎn)

 import Link from 'next/link';

 export default () => (
 <div>
 <p>this is home index page</p>
 <Link href="/about" rel="external nofollow" rel="external nofollow" >
 <a> to about page</a>
 </Link>
 </div>
 );

更多 Link 使用方式

import React, {Component} from 'react';
import Link from 'next/link';

export default class About extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 // href 值可以是一個(gè)對象
 const href = {
 pathname: '/home',
 query: {name: 'test'}
 };

 return (
 <div>
 <p>this is about page </p>
 <img src="https://www.gxlcms.com/static/test.png" alt="test"/>
 {/* replace 覆蓋歷史跳轉(zhuǎn) */}
 <Link href={href} replace>
 <a>click to home index page</a>
 </Link>
 </div> 
 );
 }
}

7. 使用內(nèi)置 router 方法，手動觸發(fā)路由跳轉(zhuǎn)

next/router 提供一套方法和屬性，幫助確認(rèn)當(dāng)前頁面路由參數(shù)，和手動觸發(fā)路由跳轉(zhuǎn)

 import router from 'next/router';
 /*
 router.pathname ==> /home
 router.query ==> {}
 router.route - 當(dāng)前路由
 asPath - 顯示在瀏覽器地址欄的實(shí)際的路由
 push(url, as=url) - 跳轉(zhuǎn)頁面的方法
 replace(url, as=url) - 跳轉(zhuǎn)頁面
 */

更好的方式使用路由 – router 的 withRouter 方法

import Link from 'next/link';
import {withRouter} from 'next/router';

const Home = (props) => {
 // 這里的 props 會得到 {router, url} 兩個(gè)屬性
 // router: {push: ƒ, replace: ƒ, reload: ƒ, back: ƒ, prefetch: ƒ, …}
 // url: {query: {…}, pathname: "/home", asPath: "/home?name=test", back: ƒ, push: ƒ, …}
 console.log(props);
 return (
 <div>
 <p>this is home index page </p>
 {/* <Link href="/about" rel="external nofollow" rel="external nofollow" >
 <a> to about page</a>
 </Link> */}
 </div>
 );
}

export default withRouter(Home);

8. 使用 next-redux-wrapper 插件輔助實(shí)現(xiàn) redux

1. 安裝依賴

sudo yarn add next-redux-wrapper redux react-redux redux-devtools-extension redux-thunk

2. 創(chuàng)建 initializeStore.js 一個(gè)可以返回 store 實(shí)例的函數(shù)

在這個(gè)文件中會完成裝載中間件、綁定reducer、鏈接瀏覽器的redux調(diào)試工具等操作

 import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension'; 
 import thunk from 'redux-thunk';
 import reducer from '../modules/reducers';

 const middleware = [thunk];
 const initializeStore = initialState => {
 return createStore(
 reducer, 
 initialState, 
 composeWithDevTools(applyMiddleware(...middleware))
 );
 };

 export default initializeStore;

3. 創(chuàng)建 reducer , action

與普通 react-redux 項(xiàng)目創(chuàng)建 reducer, action 的方法一致，我把這部分代碼都提取到一個(gè)名為 modules的文件夾中

 // /modules/reducers.js
 import { combineReducers } from 'redux';
 import about from './about/reducer';

 // 合并到主reducer
 const reducers = {
 about
 };

 // combineReducers() 函數(shù)用于將分離的 reducer 合并為一個(gè) reducer 
 export default combineReducers(reducers);

 // /modules/about/reudcer.js 
 // /about 頁面的 reducer
 import {
 CHANGE_COUNT
 } from '../types-constant';

 const initialState = {
 count: 0
 };

 const typesCommands = {
 [CHANGE_COUNT](state, action) {
 return Object.assign({}, state, { count: action.msg });
 },
 }

 export default function home(state = initialState, action) {
 const actionResponse = typesCommands[action.type];

 return actionResponse ? actionResponse(state, action) : state;
 }

 // /modules/about/actions.js
 // /about 頁面的 action
 import {
 CHANGE_COUNT
 } from '../types-constant';

 export function changeCount(newCount) {
 return {
 type: CHANGE_COUNT,
 msg: newCount
 };
 }

4. 頁面中使用

需要用到 next-redux-wrapper 提供的 withRedux 高階函數(shù)，以及 react-redux 提供的 connect 高階函數(shù)

 import React, { Component } from 'react';
 import withRedux from 'next-redux-wrapper';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import AboutCom from '../components/About/index';
 import initializeStore from '../store/initializeStore';
 import { changeCount } from '../modules/about/actions';

 class About extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 const { about: { count }, changeCount } = this.props;
 return <AboutCom count={count} changeCount={changeCount} />;
 }
 }

 const connectedPage = connect(
 state => ({ about: state.about }),
 dispatch => ({
 changeCount: bindActionCreators(changeCount, dispatch)
 })
 )(About);

 export default withRedux(initializeStore)(connectedPage);

查看 github官網(wǎng)

react-next github上一個(gè)next架構(gòu)為主實(shí)現(xiàn)React服務(wù)端渲染的模板

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：方法示例 React

熱門焦點(diǎn)

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

最新推薦

猜你喜歡

熱門推薦