node.js - 使用 React Helmet 进行服务器端渲染

问题描述

我会尽力解释我的情况。我创建了一个名为的组件MetaDecorator.js，其中包含头盔和以下配置：

import React from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'

const MetaDecorator = ({ title, description, keywords }) => {
    return (
        <Helmet>
            <title>My Website - Discover Great Resorts | {title} </title>
            <meta name="description" content={description} />
            <meta name="keywords" content={keywords} />
        </Helmet>
    )
}

MetaDecorator.propTypes = {
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
    keyword: PropTypes.string.isRequired
}

export default MetaDecorator

接下来，我将它添加到我的每个屏幕页面，例如在上HomeScreen.js，我像这样使用它：

import MetaDecorator from '../components/MetaDecorator' 
import homeMeta from '../data/home'

const HomeScreen = () => {
    return (
        <>
           <MetaDecorator 
                title={homeMeta.pageTitle} 
                description={homeMeta.pageDescription} 
                keywords={homeMeta.pageKeyword}
            />

对于每个页面，我都添加了这个 MetaDecorator 并将道具设置到我的头盔上。现在在我的后端文件夹下，server.js我添加了以下代码：

import path from 'path'
import express from 'express'
import dotenv from 'dotenv'
import colors from 'colors'
import morgan from 'morgan'
import { notFound, errorHandler } from './middleware/errorMiddleware.js'
import connectDB from './config/db.js'
import React from 'react'
import App from './src/App'
import { renderToString } from 'react-dom/server'

dotenv.config()

connectDB()

const app = express()

if(process.env.NODE_ENV === 'development'){
   app.use(morgan('dev'))
}

app.get('/', (req, res) => {
   res.send('API is running...')

   const app = renderToString(<App />);
   const helmet = Helmet.renderStatic();

  res.send(formatHTML(app, helmet));
})

function formatHTML(appStr, helmet) {
   return `
     <!DOCTYPE html>
     <html lang="en">
       <head>
         ${helmet.title.toString()}
         ${helmet.meta.toString()}
       </head>
       <body>
         <div id="root">
           ${ appStr }
         </div>
         <script src="./bundle.js"></script>
       </body>
     </html>
   `
 }

app.listen(PORT, console.log(`Server running in ${MODE} mode on port ${PORT})

当我运行应用程序时，它抱怨这个：

file:///C:/Users/Robert/Desktop/MERN/mywebsite/backend/server.js:31
[0]    const app = renderToString(<MetaDecorator />);

我的文件夹客户端和后端位于同一个文件夹中，因为我没有将它们分开。我的问题是我这样做对吗？我应该如何解决我的错误？有一个更好的方法吗？

请帮助我是这里的初学者。

更新：这是我在根目录下的 package.json 文件：

{
  "name": "iko-app",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node backend/server",
    "server": "nodemon backend/server",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "data:import": "node backend/seeder",
    "data:destroy": "node backend/seeder -destroy"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mywebsite.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mywebsite"
  },
  "homepage": "https://github.com/mywebsite",
  "devDependencies": {
    "concurrently": "^5.3.0",
    "nodemon": "^2.0.6"
  },
  "dependencies": {
    "@sendgrid/mail": "^7.4.0",
    "animate.css": "^4.1.1",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^4.5.3",
    "colors": "^1.4.0",
    "dirname": "^0.1.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-async-handler": "^1.1.4",
    "fs": "0.0.1-security",
    "install": "^0.13.0",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.29.1",
    "mongoose": "^5.10.16",
    "morgan": "^1.10.0",
    "multer": "^1.4.2",
    "mustache": "^4.1.0",
    "noty": "^3.2.0-beta",
    "path": "^0.12.7",
    "postscribe": "^2.0.8",
    "react-bootstrap": "^1.4.0",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^6.14.0",
    "react-moment": "^1.1.1",
    "react-notification-system": "^0.2.17",
    "react-notifications-component": "^3.0.3",
    "react-rating-stars-component": "^2.2.0",
    "react-script-tag": "^1.1.2",
    "react-toastr": "^3.0.0",
    "request": "^2.88.2"
  }
}

标签： node.jsreactjsexpress

node.js - 使用 React Helmet 进行服务器端渲染

问题描述

解决方案

推荐阅读