0

我正在尝试使用 Isomorphic React 构建内容管理系统。我要确定的是如何使用 RESTful 请求响应对象定义路由。

我正在查看 React Starter Kit 中的路由模块，但我不了解路由对象的逻辑，因为我不熟悉它的使用语法。看起来孩子们是一组承诺，并且异步执行每个承诺。然而const route = await next(); 将产生与路线相关的所有数据。这里是否发生了一些路由匹配逻辑？

从 server.js 调用路由模块

const route = await UniversalRouter.resolve(routes, {
  path: req.path,
  query: req.query,
});

这是 index.js 中的定义，它位于每个路由的父目录中。

/* eslint-disable global-require */

// The top-level (parent) route
export default {

  path: '/',

  // Keep in mind, routes are evaluated in order
  children: [
    require('./home').default,
    require('./contact').default,
    require('./login').default,
    require('./register').default,
    require('./about').default,
    require('./privacy').default,
    require('./admin').default,

    // Wildcard routes, e.g. { path: '*', ... } (must go last)
    require('./notFound').default,
  ],

  async action({ next }) {
    // Execute each child route until one of them return the result
    const route = await next();

    // Provide default values for title, description etc.
    route.title = `${route.title || 'Untitled Page'} - www.reactstarterkit.com`;
    route.description = route.description || '';

    return route;
  },

};

我尝试合并的 RESTful 请求适用于我的 server.js 或当我将其放入异步操作时。

  const routeList = await fetch('/graphql', {
    method: 'post',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: '{routes{path,page,chunk,data{articles}}}',
    }),
    credentials: 'include',
  });
  const routeData = await routeList.json();
  if (!routeData || !routeData.data || !routeData.data.routes) throw new Error('Failed to load the routes.');
  console.log(JSON.stringify(routeData, null, 2));
4

1 回答 1

3

React 入门套件实现通用路由器。所有路由都只是带有“路径”、“动作”和（可选）“子”属性的 JS 对象，因此您可以随意操作它们。

您所说的“魔术”只是用作中间件的路由动作。因此，数据实际上是从首先匹配的任何子路由（“家庭”、“联系人”、“登录”等之一）获取的。

我不是 100% 确定实现您想要的 fetch-routing 样式的最佳方法，但您可以在注入路由之前做到这一点。在 src/client.js （大约第 103 行）中，类似：

注意：这是未经测试的，但它应该给你一个开始的基础

const routeList = await fetch('/graphql', {
  method: 'post',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: '{routes{path,page,chunk,data{articles}}}',
  }),
  credentials: 'include',
});
const routeData = await routeList.json();
routeData.data.routes.forEach((route) => {
    routes.children.push({
       path: route.path,
       action() {
         return <Page>Render your page here</Page>;
       }
    })
})

const route = await UniversalRouter.resolve(routes, {
  ...context,
  path: location.pathname,
  query: queryString.parse(location.search),
});
于 2017-02-20T14:13:47.753 回答