从 Express 提供的客户端 React 应用程序上的一致 url 路由

Question

我目前正在使用 Express 在 React.js 和 react-router 中加载单页客户端应用程序。

它的结构使得我将 /about 和 /contact 作为标准的翡翠视图，但 /ui 作为实际的反应应用程序。 /ui 之外的任何后续导航（例如 ui/dashboard）都由 react-router 处理。这意味着，如果我需要访问 www.foobar.com/ui/dashboard，我需要点击 ui* 的路由，获取 ui/ 之后的 url（在本例中为仪表板）并将其传递给 react 路由器（通过变量在作为反应应用程序入口点的翡翠视图中），然后从反应组件加载此路由。我想让这种方法发挥作用，因为这使用户能够为 react 应用程序保存 url。麻烦的是我无法弄清楚这如何工作：

• 我无法通过快速路由器重定向传递变量
• 我需要加载 react 应用程序，而不需要除 /ui 之外的任何内容，否则 react 路由器会将其路由 URL 附加在它前面，从而破坏这种方法的要点
• 我无法将初始请求 url 存储在 cookie 中然后重定向，因为我需要发送响应以设置 cookie
• 我无法通过客户端 js 满意地修改 url

代码：

//Example 1
router.get('/ui*', requireLogin, function(req, res){
    res.render('./app/index', {initURL: req.path); //Doesnt work as everything past ui/ is still present when react-router does its thing
}); 

//Example 2
router.get('/ui', requireLogin, function(req, res){
    res.render('./app/index', {initURL: req.path); //Doesnt work as no way of accessing the initial requests url when redirecting
});

router.get('/ui*', requireLogin, function(req, res){
    res.redirect('/ui'); //Cant pass additional parameters here
}); 

Answer 1

var express = require('express')
var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

var app = express()

app.use('/ui', requireLogin, function(req, res, next) {
  // store initially requested url as a query parameter
  // e.g. /ui/dashboard would become /ui?redirect=dashboard
  // if the user is not logged in 
  var params = req.query;
  // params.redirect === 'dashboard'
  // Now you can check if there is a redirect and use it in your initial route
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var html = React.renderToString(<Handler/>, {initalState: params.redirect})
    return res.render('react_page', {html: html})
  })
})

这会让你走上正轨吗？

Answer 2

我认为您必须区分客户端路由和服务器端路由。

您将需要一个服务器端路由：

• 客户端需要加载静态内容（*.html、*.js、*.css）
• 客户端需要进行身份验证，并加载他需要的数据 (/api/...)

您还需要一个客户端路由框架（例如 ui.router for angular.js）：

• 您将在逻辑上将客户端应用程序拆分为浏览器（用户）可以记住的不同路径，例如 /、/dashboard、/...

问候，雷米