如何使用react-router 2作为服务器端路由与expressjs？

1 回答

• 3

  详细编写如何服务器端渲染反应和反应路由器应用程序可能是一个非常大的主题 .

  我将假设您是经验丰富的用户，并且您知道如何使用expressjs以及如何创建react＆react-router应用程序 .

  当您渲染服务器端时，您可以创建单独的服务器路由器来映射每个前端路由或创建一个将采用所有URL的路由器 .

  后期案例只需要一台服务器路由器 . 在服务器路由器底部的某处（错误路由之前）写入：

  app.use('/*', function(req, res){ ... });
  

  这条路线将捕获所有网址 .

  首先，我们需要有关网址的信息 . 我们不需要有关协议或域的信息，因此我们只需要这样：

  var url = req.originalUrl;
  

  关于我们得到的方法（POST，GET，PUT，DELETE）的信息：

  var method = req. method
  

  如果你想要你可以制作单独的路线，你会有：

  app.post('/something', function(req, res) {...});
  app.get('/something', function(req, res) {...});
  

  不要紧 .

  第二件事我们不使用反应路由器的浏览器历史记录！我们必须使用记忆历史 .

  你的历史对象：

  var history = createMemoryHistory(req.originalUrl || '/');
  

  并将历史对象传递给路由器 .

  我喜欢创建我的根组件以接受作为param历史对象 . 当我在前端使用它时，我会传递浏览器历史记录，当我在服务器渲染中使用它时，我会传递内存历史记录 .

  下面非常简单的示例服务器端渲染路径的外观（我也使用了ejs模板）：

  router.use('/*', function(req, res){
    var history = createMemoryHistory(req.originalUrl || '/');
    var initialState = {};
    //do something with initialState according to url and request method
    var staticHTML = ReactDOMServer.renderToString(
      React.createFactory(App)({
        history,
        initialState
      })
    );
  
    res.render('index', {
      staticHTML,
      initialState: JSON.stringify(initialState)
    });
  });
  

  在此示例中，您需要根据用户URL和请求方法填充initState . 您的应用程序应该开始使用该init数据 .

  如果使用redux，服务器端渲染也会像魅力一样工作 . 因为我们有一个商店和一个init状态对象 . 然后，您可以在渲染任何基本值期间传递 . 例如，当您渲染对象列表时，您将其置于前端并传递到init状态然后渲染 . 然后呈现的页面将具有值 .

  我正在使用react react-router redux redux-react-router expressjs的例子，它还没有完全准备就可以工作，你可以看到我如何解决服务器渲染问题：

  https://github.com/uhlryk/my-express-react-seed

  回复于 2024-05-05T21:55:31+08:00