React SSR路由支持实现

实现思路分析

在 React SSR 项目中需要实现两端路由.
客户端路由是用于支持用户通过点击链接的形式跳转页面.
服务器端路由是用于支持用户直接从浏览器地址栏中访问页面.
客户端和服务器端公用一套路由规则，路由规则是同构代码

路由规则

使用数组形式配置信息，在普通的 node 环境下也可识别

// share/routes.js
import Home from '../share/pages/Home';
import List from '../share/pages/List';export default [{path: '/',component: Home,exact: true
}, {path: '/list',component: List,exact: true
}]

实现服务器端路由

Express 路由接收任何请求
Express 路由接收所有 GET 请求, 服务器端 React 路由通过请求路径匹配要进行渲染的组件

// server/index.js
import app from './http';
import renderer from './renderer';app.get('*', (req, res) => {res.send(renderer(req));
});

服务器端路由配置
在 renderer 文件中引入 StaticRouter 组件，StaticRouter 会根据传入的 location 请求地址，去匹配要渲染的路由，转成字符串形式响应给客户端；在调用 renderer 时传入 req ，获取地址。引入 renderRoutes 把数组形式路由规则转成组件形式的路由规则

// server/renderer.js
import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import routes from "../share/routes";
import { renderRoutes } from "react-router-config";export default (req, store) => {const content = renderToString(<Provider store={store}><StaticRouter location={req.path}>{renderRoutes(routes)}</StaticRouter></Provider>);return `<html><head><title>React SSR</title></head><body><div id="root">${content}</div><script src="bundle.js"></script></body></html>
`;
};

实现客户端路由

添加客户端路由配置

// client/index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import routes from "../share/routes";ReactDOM.hydrate(<BrowserRouter>{renderRoutes(routes)}</BrowserRouter>,document.getElementById("root")
);

配置好客户端路由后在 Home 组件添加一个链接跳转到 List

// share/pages/Home.js
import React from "react";
import { Link } from 'react-router-dom';function Home() {return <div onClick={() => console.log("Hello")}>Home works<Link to="/list">jump to list</Link></div>;
}export default Home;

React SSR 实现 Redux 支持

React SSR路由支持实现相关推荐

react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
React SSR 服务器端渲染
React SSR 介绍什么是客户端渲染 CSR: Client Side Rendering 服务器端仅返回 JSON 数据,DATA 和 HTML 在客户端进行渲染什么是服务器端渲染 SSR: ...
React SSR - 01 SSR 介绍和快速开始
React SSR 介绍什么是客户端渲染 CSR:Client Side Rendering 数据和 HTML 的拼接是在客户端(浏览器)使用 JavaScript 完成的,服务端只需要返回 JSO ...
大前端时代，如何做好C 端业务下的React SSR？\n
React在中后台业务里已经很好落地了,但对于C端(给用户使用的端,比如PC/H5)业务有其特殊性,对性能要求比较苛刻,且有SEO需求.另外团队层面也希望能够统一技术栈,小伙伴们希望成长,那么如何能够 ...
react ssr 服务端渲染入门
react ssr 服务端渲染入门前言前后端同构,作为针对单页应用 SEO 优化乏力.首屏速度瓶颈等问题而产出的解决方案,近来在 react.vue 等前端技术栈中都得到了支持.当我们正打算抛弃传 ...
React SSR【React服务器端渲染】
目录 1.React SSR 介绍 2.服务器端渲染快速开始 3.客户端 React 附加事件 4.优化 5.路由支持 6.Redux 支持 1.React SSR 介绍什么是客户端渲染 ...
我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR
技术栈:webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x 前言 (好慌!可能是因为我很懒,导致...,然后,好吧,我比较懒,没有然 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...

React SSR路由支持实现

实现思路分析

路由规则

实现服务器端路由

实现客户端路由

React SSR路由支持实现相关推荐

最新文章

热门文章