快递，如何通过long url路径来反应路由器？

Question

第 3 方的事情太多了，我什至不知道如何准确地表达这个问题，但让我试着解释一下我想做什么：

我的 webapp 是一个 react/redux/react-router/redux-router/webpack webapp，我使用 express 服务器来解决从客户端直接到另一个域上的服务器的 CORS 问题。

Express 在端口 3000 上运行，端口 8080 上的 webpack 开发服务器

这是我的快速设置（就我所知它太复杂了，但是在做 webdev 时有太多的库需要学习，有时你只需要一些东西来工作而不是花 3 天时间研究每个库）：

  app.use(express.static(path.join(__dirname, '/dist/')));

  var proxyRules = new HttpProxyRules({
      rules: {
        '.*/broker': 'https://SomeDomain.com/broker/', 
        '.*/api': 'https://api.AnotherDomain.com/'
      }
    });



  var bundle = require('./bundle.js');
  bundle();

  var proxy = httpProxy.createProxyServer();

  proxy.on('error', function(e) {

  });

  // Any requests to localhost:3000/dist is proxied
  // to webpack-dev-server
  app.get('/bundle.js', function (req, res) {
    proxy.web(req, res, {
        target: 'http://localhost:8080/dist',
        changeOrigin:true
    });
  });


  app.all('/dist/*', function (req, res) {
    proxy.web(req, res, {
        target: 'http://localhost:8080',
        changeOrigin:true
    });
  });

  app.get('/img/:name', function(request, response){
    const name = request.params.name
    response.sendFile(path.join(__dirname, '/../dist/img/' + name));
  });

  app.get('/css/fonts/:name', function(request, response){
    const name = request.params.name
    response.sendFile(path.join(__dirname, '/../dist/css/fonts/' + name));
  });

  app.get('/css/:name', function(request, response){
    const name = request.params.name
    response.sendFile(path.join(__dirname, '/../dist/css/' + name));
  });


  app.all('*', function(req, res) {
     var target = proxyRules.match(req);
    if (target) {
       return proxy.web(req, res, {
         target: target
      });
    } else {
      res.sendFile(path.join(__dirname, '/../dist/index.html'));
    }
 })

简而言之：webpack 编译到 dist 文件夹。我将我的静态资产（图像等）复制到 dist/img、dist/css 等

现在我在上面的配置中设置了一堆规则：

当它寻找静态资产时，它 return 是那些 (img,css,font)
如果 url 与代理中的规则匹配，它会代理 url 执行服务器到服务器的请求，而不会出现 CORS 问题
如果它要求由 webpack 生成的 bundle.js 文件，它 return 就是那个文件
所有 localhost:3000/dist 调用都重新映射到端口 8080，其中 webpack 开发服务器运行
所有剩余的东西 (*) returns index.html

现在的问题是确保反应路线正常工作（他们使用 url 中的相对路径）。

在当前配置中，如果我打开诸如 http://localhost:3000/dashboard 或 http://localhost:3000/location 之类的 url，它会完美运行，但如果我尝试 url 样式http://localhost:3000/dashboard/profile/user5 好像又回到了想 return index.html

的 * 规则

我该如何解决这个问题，以便将完整路径传递给客户端路由器？

这是客户端配置

export const routes = (
  <Route component={Application} name="application">
    <Route component={Home} path="/"/>
    <Route component={Login} path="/login"/>
    <Route component={requireAuthentication(Dashboard)} path="/dashboard"/>
    <Route component={requireAuthentication(Locations)} path="/locations"/>
    <Route component={requireAuthentication(EditLocationTemplate)} path="/locations/template/location"/>
    <Route component={NotFound} path="*" />
  </Route>
);

如果您对这里的 Express 的一般设置有任何意见，我没有意见。仍在学习如何使用所有这些，所以我确信这远非最佳配置。

谢谢！

Answer 1

Express 路线将按照您创建它们的顺序进行匹配，最终返回到您的最后一个 "catch all" 路线 (app.all('*'))。

由于您还没有为诸如 /dashboard/profile/user5 之类的路由编写任何匹配项，因此它基本上按照您的要求进行操作，并且默认为包罗万象的路由。

如果您想轻松处理这些问题，您可以创建一个包含子项的顶级路由列表，并相应地匹配它们：

    var routesWithChildren = [
      '/dashboard',
      '/locations'
    ];

    routesWithChildren.forEach(function (rootPath) {
        app.get(rootPath + '/*', function (req, res) {
          // Send or render whatever is appropriate here
          // You can use req.path to get the path that was requested
          // Eg: /dashboard/profile/user5
        });
    });

快递，如何通过long url路径来反应路由器？

Express, how to pass long url path to react router?

node.js

express

reactjs

react-router