我正在尝试在我们的项目中实现放大器页面。
到目前为止，我已经得出以下解决方案:如果网址中有查询，例如:myurl.com?amp=1，则页面将在必要的标记下完全重绘。问题是，目前我们的服务器配置为在 2 个 html 文件之间进行选择，如果有错误，则标记有错误，如果没有，则使用通常的索引。它的工作原理如下:
yield this.render('index', {
state: encodeURIComponent(JSON.stringify(state)),
body: renderToString(
<Provider store={store}>
<RouterContext {...props}/>
</Provider>
)
});
和错误
app.use(isProduction ? function * error(next) { // error handler
try {
yield next;
if (this.response.status === 404 && !this.response.body) {
this.throw(404);
}
} catch (err) {
const STATUS_CODES = require('http').STATUS_CODES;
const seo = require('app/modules/seo').initialState;
this.status = err.status = err.status || 500;
if (err instanceof URIError) {
this.redirect('/search');
return;
}
err.message = STATUS_CODES[this.status];
this.app.emit('error', err, this);
yield this.render('error', {
assets,
err,
seo: {...seo, long_title: `${err.status} – ${seo.long_title}`}
});
}
} : error());
componentDidMount() {
if (this.state.isAmp) {
document.write(expotedAmpMarkup(this.props.body))
};
}
请告诉我，当 URL 中有请求时，服务器端如何禁用标准标记？
是否可以在服务器端绘制新页面？
对于困惑的文字，我提前表示歉意。我知道的太少，无法提出一个有效的问题，而且除了这个论坛之外，我没有人可以寻求帮助。
如有必要，它已准备好发送整个服务器和 webpack 配置。 准备好回答任何问题。谢谢。
最佳答案
您可以根据您的请求在 SSR 上呈现您需要的任何页面。
您可以查看我处理路由的 SSR 应用程序: https://github.com/tornado1979/ssr-rentalcars 。
一些要点如下:
客户端“index.js”:
.....
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
import store from './store'
import Routes from './components/Router/routes'
ReactDOM.hydrate(
<Provider store={store}>
<BrowserRouter>
<div>{renderRoutes(Routes)}</div>
</BrowserRouter>
</Provider>,
document.getElementById('root'),
)
客户端“routes.js”，在这里放置所有页面
export default [
{
...App,
routes: [
{
...HomePage,
description: "Compare car hire deals and find the cheapest prices in.",
keywords: 'car hire, cheap car hire, car rental uk, rent a car, car rentals, uk car car, cheap car rentals spain, cheap car rental usa, carrentals, rent car, car hire comparison, carrental, carhire, compare car hire, car rental comparison, rentalcars, rental cars',
path: '/home',
title: '.......',
},
{
...About,
description: 'About Compare car hire deals...',
keywords: 'car hire, ...',
path: '/about',
title: 'About - Rentalcars',
},
{
...NotFoundPage,
description: '',
keywords: '',
title: 'page not found - Rentalcars',
},
],
},
]
服务器端，“index.js”
您接收请求并将正确的组件发送给客户端
//你需要这个路由器:
import { matchRoutes } from 'react-router-config'
app.get('*', (req, res) => {
const store = createStore()
// Initialize and load data into the store
const promises = matchRoutes(Routes, req.path).map(({ route }) => {
return route.loadData ? route.loadData(store) : null
})
Promise.all(promises).then(() => {
const context = {}
const content = renderer(req, store, context)
if (context.notFound) {
res.status(404)
}
return res.send(content)
}).catch(error => res.status(500).send(`Internal Server Error:,
${error}`))
})
渲染 page和store并将它们传递给客户端“render.js”
export default (req, store, context = {}) => {
const content = renderToString(
<Provider store={store}>
<StaticRouter context={context} location={req.path}>
<div>{renderRoutes(Routes)}</div>
</StaticRouter>
</Provider>,
) const Helm = Helmet.renderStatic()
返回(
<!DOCTYPE html>
<html ${helmet.htmlAttributes.toString()}>
<head>
<meta charset="UTF-8">
${helmet.title.toString()}
${helmet.meta.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="root">${content}</div>
<script>
window.INITIAL_STATE = ${serialize(store.getState())}
</script>
<script src="bundle.js"></script>
</body>
</html>
)
}
希望对您有所帮助。
关于javascript - Nodejs & react : render another HTML file upon request，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56207232/