时间:2021-05-26
说明
实现 路由跳转、redux
文件版本
Next.js GitHub 文档
项目源码
使用
Next.js 使用文件体统作为API,可以自动进行服务器端渲染和代码分割
1. 安装
yarn add next react react-dom2. package.json 中添加 npm script
3. 创建 /pages 文件夹,其中文件会映射为路由
/pages 文件夹是顶级组件文件夹 其中 /pages/index.js 文件会映射文 / 路由,其他文件根据文件名映射
目录结构 映射路由 /pages/index.js / /pages/about.js /about /pages/home/index.js /home /pages/home/about.js /home/about
每一个路由js文件都会 export 一个 React 组件,这个组件可以是函数式的也可以是通过集成 React.Component 得到的类
export default () => <div>this is index page </div>;4. 创建 /static 文件夹,存放静态资源
静态资源文件夹文件会映射到 /static/ 路由下,直接通过 http://localhost:3000/static/test.png 访问
5. 使用内置组件 <head> 定制每个页面的 head 部分
6. 使用内置组件 <Link> 进行路由跳转
更多 Link 使用方式
import React, {Component} from 'react';import Link from 'next/link';export default class About extends Component { constructor(props) { super(props); } render() { // href 值可以是一个对象 const href = { pathname: '/home', query: {name: 'test'} }; return ( <div> <p>this is about page </p> <img src="/static/test.png" alt="test"/> {} <Link href={href} replace> <a>click to home index page</a> </Link> </div> ); }}7. 使用内置 router 方法,手动触发路由跳转
next/router 提供一套方法和属性,帮助确认当前页面路由参数,和手动触发路由跳转
import router from 'next/router';更好的方式使用路由 – router 的 withRouter 方法
import Link from 'next/link';import {withRouter} from 'next/router';const Home = (props) => { // 这里的 props 会得到 {router, url} 两个属性 // 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> {} </div> );}export default withRouter(Home);8. 使用 next-redux-wrapper 插件辅助实现 redux
1. 安装依赖
sudo yarn add next-redux-wrapper redux react-redux redux-devtools-extension redux-thunk2. 创建 initializeStore.js 一个可以返回 store 实例的函数
在这个文件中会完成装载中间件、绑定reducer、链接浏览器的redux调试工具等操作
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. 创建 reducer , action
与普通 react-redux 项目创建 reducer, action 的方法一致,我把这部分代码都提取到一个名为 modules的文件夹中
// /modules/reducers.js import { combineReducers } from 'redux'; import about from './about/reducer'; // 合并到主reducer const reducers = { about }; // combineReducers() 函数用于将分离的 reducer 合并为一个 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 高阶函数,以及 react-redux 提供的 connect 高阶函数
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官网
react-next github上一个next架构为主实现React服务端渲染的模板
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
next.js简介最近在学React.js,React官方推荐使用next.js框架作为构建服务端渲染的网站,所以今天来研究一下next.js的使用。next.
React是最受欢迎的客户端JavaScript框架,但你知道吗(可以试试),你可以使用React在服务器端进行渲染?假设你已经在客户端使用React构建了一
linux下udp服务器端源码示例:?1234567891011121314151617181920212223242526272829303132333435
用python实现FTP文件传输,包括服务器端和客户端,要求(1)客户端访问服务器端要有一个验证功能(2)可以有多个客户端访问服务器端(3)可以对重名文件重新上
本文实例为大家分享了Java实现文件上传服务器和客户端的具体代码,供大家参考,具体内容如下文件上传服务器端:/***使用TCP协议实现上传功能的服务器端*思路: