Question

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

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

从server.js

调用routes模块

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));

Answer 1

React入门套件实施Universal Router。所有路径都只是具有'path'，'action'和（可选）'children'属性的JS对象，因此您可以随意操作它们。

你所谈论的“神奇”只是一个route's action used as middleware。因此，数据实际上是从首先匹配的子路径（“主页”，“联系人”，“登录”等）中获取的。

我不是100％确定实现所需的获取路由样式的最佳方法，但您可以在注入路由之前执行此操作。在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),
});

在Web API中定义Isomorphic React路由

1 个答案: