个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我正在尝试使用 react 和 react-router-dom 进行服务器端渲染我之前已经这样做过，但是对于新版本，它会抛出一个错误你不应该在路由器之外使用 Switch 我认为这是版本冲突，但是否有解决方案(react-router-config - You should not use outside a (it is inside a Router!))。
服务器.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from '../client/src/AppRoutes';
import { StaticRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'
const app = express();
app.get('*', (req, res) => {
const routerContext = {};
res.send(`
<!doctype html>
<html lang="en">
<head>SSR</head>
<body>
<div id="root">${ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={routerContext}>
<div>{renderRoutes(App)}</div>
</StaticRouter>
)}</div>
<!-- <script src="/dist/main.js"></script>-->
</body>
</html>
`);
});
app.listen(3000, (error) => {
if (error) {
return console.log('something bad happened', error);
}
console.log("listening on " + 3000 + "...");
});
AppRoutes.js
import PageA from './Container/PageA';
import PageB from './Container/PageB';
import Home from './Container/Home'
import MainPage from './Container/MainPage';
export default [
{
...MainPage,
routes:[
{
...Home,
path:'/',
exact:true
},
{
...PageA,
path:'/a',
exact:true
},
{
...PageB,
path:'/b',
exact:true
}
]
}
]
包.json
{
"name": "reactSSRwithCodeSplitting",
"version": "1.0.0",
"description": "",
"main": "server/server.js",
"scripts": {
"test": "babel-node server/index.js",
"start": "nodemon server/index.js",
"build": "babel server --out-dir ./dist --source-maps",
"serve": "node ./dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-loadable": "^5.5.0",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/node": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "*",
"@babel/register": "^7.5.5",
"chai": "^4.2.0",
"nodemon": "^1.19.1"
}
}
最佳答案
node_modules"react-router": "^5.0.1" 添加到您的 package.jsonnpm install 重新安装。确保 react-router, react-router-config, react-router-dom 是同一个版本。
当我尝试重现你的错误时，我发现问题中你的 package.json 缺少 react-router 依赖，这让我无法启动服务器。
从你的故事来看，我猜你的 node_modules 中有另一个版本的 react-router，它与 react-router- 不同步配置 和 react-router-dom 版本 5.0.1。
所以我尝试重现这个问题:
"react-router": "^4.3.0",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1"
这将导致您提到的问题。
关于javascript - 尽管所有反应路由器版本冲突，如何在 react 中进行服务器端渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57447677/
24
4
0
我在使用 Jade 和 express 时遇到了一些问题。这是 serder 端: router.get('/login', function (req, res) { res.status(2
是否可以使用 JavaScript 服务器端，从而在某些核心计算中不会显示在页面源代码中？ 我正在开发一款游戏，代码的一个关键部分只需要在服务器端计算然后传回客户端。 我的整个游戏都是用 Javasc
我正在寻找有关如何使用 ExtJS 4 实现安全页面的信息。我所说的安全页面是指用户将使用 Siteminder (SSO) 登录我们的网站，因此我们将拥有用户的身份。然后我们将通过进行数据库/LDA
我的 Centos 7 服务器正在运行 apache 2.4.6，并且正在使用 mod_wsgi 提供 django webapp。我的问题是我无法从另一台计算机的浏览器访问服务器 url。我没有从
我们收到了客户的请求，要求我们基于 ExtJS 框架构建 Web 应用程序。我查看了互联网，发现 ExtJs 只是一个客户端 javascript 控件，但我认为 Web 应用程序也必须具有服务器端
我有三个组件。 组件一包含组件二和三。 组件二是一个列表。 组件三用于向数据库添加项目。 当我将一个项目保存到数据库时，我想更新组件二中的列表。 我怎么做？ 最佳答案 设想 让我们假设:
欢迎， 我正在寻找能使我以尽可能高的格式下载youtube视频的youtube api。 几年前，这项工作更为简单，因为url拥有关于质量的信息，例如“fmt = 22”或“fmt = 6”，我们现在
我想将电子邮件 x@x.com 的用户密码设置为“an”。但代码不起作用。这是我的云代码: Parse.Cloud.define('testSetPasswordForUser', functio
正在阅读http://cocoawithlove.com/2010/03/streaming-mp3aac-audio-again.html这篇文章，想知道如何在服务器端实现它，是否像将文件放在htd
我有一个使用一些 css/javascript 选项卡的 php 脚本，它们在我的本地服务器上运行，但当我上传到我的在线服务器时则不起作用。 只是想知道是否有人知道为什么会出现这种情况？所有路径都
是否可以从 JavaScript 脚本获取服务器端页面的源代码？我希望能够获取服务器上同一文件夹中的页面的源代码。除了javascript之外，是否可以不使用任何其他东西？ 最佳答案 如果您想从 ja
.NET 4.0 我正在寻找在我们的服务器上生成Word文档的最简单方法。 局限性: 服务器端 我不想在服务器上安装word 数据源是XML 我试图用XSLT生成快速简单的DOCX，但是我可以找到的用
我正在使用 native jQuery 验证库来验证在联系表单中输入的电子邮件地址。由于这是一个表达式引擎站点，因此我使用其电子邮件验证器作为服务器端备份。 当我输入 test@b.c 时，jQuer
我使用带有服务器端处理的数据表来显示数万行。我需要通过复选框过滤这些数据。我能够制作一个工作正常的复选框，但我不知道如何添加多个复选框以协同工作。我找到了 similar solution在这里，但我
我正在尝试编写一个消息传递应用程序，并且我能够发送消息(显示为服务器客户端正确显示消息)但随后将我的客户端踢出服务器。服务器打印以下错误: java.io.EOFException at java.i
如果设备是移动设备，如何防止侧边栏加载服务器端资源？我了解如何通过 CSS 隐藏，但我更感兴趣的是防止对服务器的调用。 最佳答案 WordPress有一个名为wp_is_mobile()的函数它将检查
我有一个返回 text/event-stream 数据的网址，因此我尝试连接并打印我找到的所有内容: var url = "..." var source = new EventSource(url)
我得到这样的错误列表:{ error: [ "Email is required", "First Name is required"] } 我需要如何修改它，以获取包含字段名称的列表？ public
我正在尝试使用 ASIFormDataRequest 将数据发送到 ASP.net 服务器端。我创建了一个aspx页面。目前我可以得到这两个纯文本。但是我不知道如何通过 Request.Form 在
我在 ${host}/api/graphql 有一个可通过 POST 访问的快速 graphql 端点。 在那条路线上，我有身份验证中间件，如果用户未登录，我想重定向到登录页面。 看起来有点像这样。
我是一名优秀的程序员,十分优秀！