两个通配符路由在react-routing中意味着什么?

时间:2015-10-21 18:45:19

标签: node.js reactjs isomorphic-javascript react-routing

我试图通过Suffix of "f" on float value?了解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} />;
  });
})

1 个答案:

答案 0 :(得分:0)

第一个包含所有路径的关键行是await next(),它将引用从路径树下方的匹配返回的下一个组件的引用,然后将其作为具有<App context={state.context}>{component}</App>的子项插入。在路线与'/contact''/login''/register'不匹配的所有情况下,第二个全部归还将返回孩子。你可以想象一下额外的所有儿童&#34;在树的下方,通过路线进行更深的组件嵌套。