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

Question

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

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

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

这是我目前的情况:

// 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>
    )
  }
}

那么，我该怎么办？

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 呈现服务器端反应内容？

How to render server side react content with NextJS and React Router?

node.js

reactjs

react-router

next.js