crazyfactory/ts-react-boilerplate

Improve typings for routes

paibamboo opened this issue · 1 comments

Our routes list lack typings. For example in App.tsx we have

private components: {[key: string]: React.ComponentClass} = {
    about: AboutPage,
    counter: CounterPage,
    home: HomePage,
    stars: StarsPage
  };

We need to make sure that the keys of this components variable are the same of the name property of routes in routes.ts

const routes: IRoute[] = [
  {name: "home", path: "/"},
  {name: "about", path: "/about"},
  {name: "counter", path: "/counter"},
  {name: "register", path: "/register"},
  {name: "stars", path: "/stars"}
];

If we change the name from home to homePage of routes variable, there won't be any compile error until we run the app and find that the page is 404. We have to manually remember to change the components key from home to homePage too which is cumbersome when there are lots of pages.

on one of the project we had functions which generated the routes based on parameters enabling build time error.