Routing

Rekit uses React router as the routing solution. It's almost the standard way for React web applications. With React-router-redux you can easily sync the routing state with the Redux store.

Routing is very important even for a simple application. Just like a traditional web application needs different URLs for different page, a sigle page application also needs it to group different logic into different UI parts, which is the Page concept of Rekit.

With Rekit, Page is usually the element to associated with a URL path. Whenever creating a Page by Rekit, it auto defines the mapping rule in the routes config.

Route configuration

Since Rekit use feature-oriented folder structure, so does route configuration. That is all feature related route config is also defined in the feature folder. Each feature has a route.js file where you define the route rules. Below is a sample configuration:

import {
  EditPage,
  ListPage,
  ViewPage,
} from './index';

export default {
  path: '',
  name: '',
  childRoutes: [
    { path: '', component: ListPage, name: 'Topic List', isIndex: true },
    { path: 'topic/add', component: EditPage, name: 'New Topic' },
    { path: 'topic/:topicId', component: ViewPage },
  ],
};

Using JavaScript to define route rules

From above example, we can see route config uses JavaScript. Actually React router supports Json for configuration. Rekit takes use of it so that it's easy to seperates different routing config into different features. Below is a Json routes config example from the React router official doc:

const routes = {
  path: '/',
  component: App,
  indexRoute: { component: Dashboard },
  childRoutes: [
    { path: 'about', component: About },
    {
      component: Inbox,
      childRoutes: [{
        path: 'messages/:id', component: Message
      }]
    }
  ]
}

Below is the pattern used by Rekit so that different routes config could be defined in their features:

import topicRoute from '../features/topic/route';
import commentRoute from '../features/comment/route';

const routes = [{
  path: '/rekit-example',
  component: App,
  childRoutes: [
    topicRoute,
    commentRoute,
    { path: '*', name: 'Page not found', component: PageNotFound },
  ],
}];

It shows how to import and use routes config from features topic and comment.

Note that you don't need to maintain the file src/common/routeConfig.js manually, Rekit will auto add and remove the rule when adding/removing a feature.

Using isIndex property instead of indexRoute

Unlink the JSX way to define route config with <IndexRoute ...> tag, the official indexRoute config for JavaScript API is a difficult part for Rekit because it prevents defining all necessary incofmation in different features. So Rekit adds the support by using isIndex property. A routing rule with isIndex: true will become the index route for the parent. Below code is the route config for the auto created home feature:

import {
  DefaultPage,
  TestPage1,
  TestPage2,
} from './index';

export default {
  path: '',
  name: 'home',
  childRoutes: [
    { path: 'default-page', component: DefaultPage, isIndex: true },
    { path: 'test-page-1', component: TestPage1 },
    { path: 'test-page-2', component: TestPage2 },
  ],
};

The DefaultPage then becomes the index route for the root path.

The name property

You may have noticed there is a name property for the route config rule. Actually it's only used by the SimpleNav component. It's only a handy component for displaying links from the route config in dev time. You have seen in the welcome page. It may be useless for a real world application.

All other usage of route config API is just the same with the official way, you can refer to the React-router official docs.

results matching ""

    No results matching ""