react服务端渲染-02

技术分享者
121 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

hi 大家好，今天开始从0写react服务端渲染的第二篇文章

上篇文章讲述了环境搭建

接下来开始，写react组件，在node中进行渲染

首先在src目录下创建Home和Person两个组件

在pages目录下创建Home.js

// src/pages/Home.js
import React from 'react';


const Home = () => {
    return <div>home</div>
}

export default Home;

在pages目录下下创建person.js

// src/pages/Person.js
import React from 'react';


const Person = () => {
    return <div>Person</div>
}

export default Person;

然后开始编写路由，对应的查找上述的home和person两个组件

在pages目录下创建routes.js文件

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom'

import Home from './pages/Home';
import Person from './pages/Person';


const RoutesList = () => {
    return (
        <div>
            <ul>
                <li>
                    <Link to='/'>首页</Link>
                </li>
                <li>
                    <Link to='/person'>个人中心</Link>
                </li>
            </ul>
            <Routes>
                <Route exact path='/' element={<Home />} />
                <Route exact path='/person' element={<Person />} />
            </Routes>
        </div>
    )
}

export default RoutesList;

最后在server.js中编写 react代码，能够让react代码在node中渲染

1.react-dom库中有个server库，就是react-dom/server，来专门在node中渲染react

2.在react-router-dom下也有个server库，就是react-router-dom/server，来渲染react路由

首先引入这两个库，以及路由文件

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server'
import Routes from './routes'

然后通过ReactDOMServer中的renderToString来渲染react代码，而路由文件使用StaticRouter进行包裹

代码如下：

const content = ReactDOMServer.renderToString(
        <StaticRouter location={req.url}>
            <Routes />
        </StaticRouter>
    )

最后将 content 写成 html的格式，进行输出，编写以下代码，如下：

const html = `
        <html>
            <head></head>
            <body>
                <div id="root">${content}</div>
            </body>
        </html>
    `
    res.writeHead(200,{
        'content-type': 'text/html;charset=utf8'
    })
    res.end(html)

接下来我们一起看下现在的效果：

当切换的首页的路由时：

当切换到个人中心的路由时：

这样我们就实现了 使用react 服务端渲染的路由切换

下篇文章 讲解 服务端渲染中的前端注水

avatar
文章
阅读
粉丝