Reactjs 儿童路线赢得';t在SSR React应用程序上重新加载
每次我尝试在任何子路由上重新加载页面时,页面都无法正确刷新。它只显示没有CSS或JavaScript的HTML 我已经看过react路由器配置文档、react路由器ssr文档,并且一直在修改我的Routes.js文件 Routes.jsReactjs 儿童路线赢得';t在SSR React应用程序上重新加载,reactjs,reload,renderer,server-side-rendering,nested-routes,Reactjs,Reload,Renderer,Server Side Rendering,Nested Routes,每次我尝试在任何子路由上重新加载页面时,页面都无法正确刷新。它只显示没有CSS或JavaScript的HTML 我已经看过react路由器配置文档、react路由器ssr文档,并且一直在修改我的Routes.js文件 Routes.js export default [ { ...App, routes: [ { ...Home, exact: true,
export default [
{
...App,
routes: [
{
...Home,
exact: true,
path: '/'
},
{
...CriticPage,
path: ['/nba', '/nhl', '/pga'],
routes: [
{
...SportStats,
path: [
'/nba', '/nba/critics', '/nba/players', '/nba/fans',
'/nhl', '/nhl/critics', '/nhl/players', '/nhl/fans',
'/pga', '/pga/critics', '/pga/players', '/pga/fans']
}
]
},
{
...ProfilePage,
path: '/profile'
},
{
...NotFoundPage
}
]
}
]
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { renderRoutes } from 'react-router-config'
import serialize from 'serialize-javascript'
import Routes from '../client/Routes'
export default (req, store, context) => {
const content = renderToString(
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
<div>
{renderRoutes(Routes)}
</div>
</StaticRouter>
</Provider>
)
return `
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Goat</title>
<link rel="icon" type="image/png" href="images/favicon.ico"/>
</head>
<body>
<div id="app">${content}</div>
<script>
window.INITIAL_STATE = ${serialize(store.getState())}
</script>
<script src="bundle.js"></script>
</body>
</html>
`
}
每当我刷新子路由页面时,控制台中都会出现以下错误:
SyntaxError:应为表达式,得到'{
const content=renderToString(
{renderRoutes(Routes)}
)
返回`
山羊
${content}
window.INITIAL_STATE=${serialize(store.getState())}
`
}
我必须在renderer.js文件中的这些文件前面添加一个“/”
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="icon" type="image/png" href="/images/favicon.ico"/>
<script src="/bundle.js"></script>
我必须在renderer.js文件中的这些文件前面添加一个“/”
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="icon" type="image/png" href="/images/favicon.ico"/>
<script src="/bundle.js"></script>
切勿发布代码、错误或其他输出的图像!我在“编辑”下添加了用于导入上面的style.css和bundle.js文件的渲染器文件。永远不要发布代码、错误或其他输出的图像!我在上面的“编辑”下添加了用于导入style.css和bundle.js文件的渲染器文件。