ywt-web/routes

Application Routes

Each routes is just a plain JavaScript object having path (string or regular expression), action (function) and optionally children (array with child routes) attributes, for example:

import AboutPage from './AboutPage';

export default {

  path: '/about',

  action: () => ({
    title: 'About Us',
    component: AboutPage,
  }),

};

The action() (aka route handler) must return an object having title (string), component (React component) and optionally props fields. It can be asynchronous, as the following example demonstrates:

import Post from './Post';

export default {

  path: '/posts/:id',

  async action({ params }) {
    const resp = await fetch(`/api/posts/${params.id}`);
    const data = await resp.json();
    return {
      title: data.title,
      component: Post,
      props: data,
    };
  },

};

In order to keep your project more organized, create a separate folder for each route (view/screen), where each route may contain routing and data fetching logic, as well as all the UI components and graphics required to render that particular view, for example:

├── /routes/                    # View/screen UI components + routing information
│   ├── /profile/               # User profile page, e.g. www.example.com/username
│   │   ├── /index.js           # Routing and fetching, e.g. { path: '/:username', action() { .. } }
│   │   ├── /ProfilePage.css    # Styles for the profile page
│   │   ├── /ProfilePage.js     # Profile page component
│   │   ├── /ProfilePicture.css # Styles for user's photo component
│   │   ├── /ProfilePicture.js  # User's photo component
│   │   ├── /UserAcitivy.css    # Style for user's activity component
│   │   └── /UserAcitivy.js     # User's activity component
│   └── /...                    # etc.