在 Web 中定义同构 React 路由 API

Question

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

我正在查看 React Starter Kit 中的路由模块，但我不理解路由的逻辑 object 因为它的使用语法我不熟悉。看起来 children 是一组承诺，异步执行每个承诺。但是 const route = await next(); 将生成与路由关联的所有数据。这里有一些路由匹配逻辑吗？

从 server.js

调用路由模块

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

这里是index.js里面的定义，在每个路由的parent目录下

/* 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 对象，因此您可以随意操作它们。

你说的"magic"只是一个route's action used as middleware。所以数据实际上是从最先匹配的子路由中获取的（'home'、'contact'、'login' 等之一）。

我不是 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),
});

在 Web 中定义同构 React 路由 API

Define Isomorphic React routes in Web API

reactjs

isomorphic-javascript

react-starter-kit

isomorphic