I'm trying to understand the react-starter-kit by kirasoft and noticed that their routes have two entries for the '*' wildcard route. Why are there two and what is the order of precedence? The first route seems to set up the app overall and then the second one seems to fire off the default content handler... do both get fired off and if so what's the logic between the two, do they both just fire sequentially and get appended together in the response somehow?
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} />;
});
})
The key line in the first catch-all route is await next() which will give a reference to the next component returned from a match farther down the route tree, which is then inserted as child with <App context={state.context}>{component}</App>. The second catch-all would return the child in all cases where the route does not match '/contact', '/login', or '/register'. You can imagine additional catch-all "children" further down the tree for deeper component nesting by route.