Question

我需要从服务器端渲染我的React应用程序。为此，我正在使用框架next.js.但我面临两个问题。

首先，我需要动态地提供我的应用程序。这意味着我需要一个服务器端路由器来根据当前的URL显示我的反应组件。

然后，我需要在渲染我的组件之前加载一些动态数据。所以我需要将这些数据从节点传递给我的反应组件。

这是我目前的情况：

＆＃13;

// In Node.js

app.get("/",function(req,res){

  return app.prepare()
    .then(() => handle(req, res))
    .catch(ex => {
      console.error(ex.stack)
      process.exit(1)
    })
})

//In React.js

import React from 'react'
export default class Index extends React.Component{
 
  render(){
    return(
      <div>
        <p>Hello Server Side Rendered React App from Google Cloud Front</p>
        
      </div>
    )
  }
}

＆＃13;

那么，我该怎么办？

Answer 1

如果你正在使用React的NextJs，你不需要react-router来创建页面，更容易，你需要创建一个名为pages的目录，名为index.js，它们有组件来管理导航和等等。

看看他们已经完全涵盖这些步骤的GitHub文档。

https://zeit.co/blog/next2

快速举例：

// pages/index.js
import Link from 'next/link'
export default () => (
  <div>Click <Link href="/about"><a>here</a></Link> to read more</div>
)

// pages/about.js
export default () => (
  <p>Welcome to About!</p>
)

如何使用NextJS和React Router呈现服务器端内容？

1 个答案: