两条通配符路由在反应路由中意味着什么？

Question

我正在尝试理解基拉索夫的react starter kit，并注意到他们的路由有两个“*”通配符路径的条目。为什么有两个，优先顺序是什么？第一条路径似乎设置了整个应用程序，然后第二条路径似乎启动了默认的内容处理程序.这两个人是否都被解雇了?如果是的话，两者之间的逻辑是什么?他们是否只是顺序地开火，并在某种程度上被附加到一起呢？

import React from 'react';
import Router from 'react-routing/src/Router';
import http from './core/HttpClient';
import App from './components/App';
import ContentPage from './components/ContentPage';
import ContactPage from './components/ContactPage';
import LoginPage from './components/LoginPage';
import RegisterPage from './components/RegisterPage';
import NotFoundPage from './components/NotFoundPage';
import ErrorPage from './components/ErrorPage';

const router = new Router(on => {
  on('*', async (state, next) => {
    const component = await next();
    return component && <App context={state.context}>{component}</App>;
  });

  on('/contact', async () => <ContactPage />);

  on('/login', async () => <LoginPage />);

  on('/register', async () => <RegisterPage />);

  on('*', async (state) => {
    const content = await http.get(`/api/content?path=${state.path}`);
    return content && <ContentPage {...content} />;
  });
})

Answer 1

第一个捕获所有路由中的关键行是await next()，它将引用从路由树后面的匹配返回的下一个组件，然后插入为带有<App context={state.context}>{component}</App>的子组件。在路由不匹配'/contact'、'/login'或'/register'的所有情况下，第二个catch-all将返回子路由。您可以想象更多的捕获所有“子”在树的更深的组件嵌套的路由。