React服务端渲染如何处理RESTfulAPI(react-router+express)？

Question

我对 React SSR 有疑问。我使用 react-router 作为我的应用程序路由管理器。

在服务器端，它可能是这样的（server.js）：

var app = express();
app.get("*",function(req, res ){
     match({routes:AppRoutes, location:req.url},

      function(err, redirectLocation, renderProps){
        if (error) {
          res.send(500, error.message)
        } else if (redirectLocation) {
          res.redirect(302, redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
          res.send(200, renderToString(<RoutingContext {...renderProps} />))
        } else {
          res.send(404, 'Not found')
       }
    });
});

万一react-router消耗了所有GET路由，如果我在服务器端需要RESTful API，我如何将它与react-route分开？

如果我在前端有一个组件：

class Post extends Component{
    componentDidMount(){
       fetch('/api/post')
         .then(function(response){
              //change component state or do other
         })
         .catch(function(err){
             //handle error
         })
    } 
     render(){
      // 
     }
}

这个组件如何通过RESTfulAPI与服务器通信？
Express能提供这样的RESTfulAPI结构吗？

app.get("/api/post",function(){
    //do something and response
});

真不懂

Answer 1

问："In case react-router consumes all GET routes, if I need RESTful API in the server side, how do I separate it from react-route?"

A：您可以使用您编写的代码收听 API 电话：

app.get("/api/post",function(){
    //do something and response
});

但是你必须把它放在其他侦听 "*" 的代码之上。

问："How does this component communicate with server by RESTful API?"

A：您的组件在服务器上呈现时不会执行 Ajax 调用。服务器端不会调用函数 componentDidMount。

React服务端渲染如何处理RESTfulAPI(react-router+express)？

How does React server-side rendering deal with RESTful API (react-router+express)?

rest

express

reactjs

react-router

server-side-rendering