node.js - 如何使用 NextJS 和 React Router 渲染服务器端 React 内容？

Question

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

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

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

这是我目前的情况:

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

如果你将 NextJs 与 React 一起使用，你不需要用 React-router 来创建页面，更容易，你需要创建一个名为 page 的目录，其中包含名为 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>
)