React-fs-router

A cli library for implementing file-system based routing in React applications.

Installation

Use yarn or npm to install react-fs-router

yarn add react-fs-router

npm install react-fs-router

Usage

The position of a file in the folder structure defines its path. Files named index are treated as the root file in each folder. You can define a dynamic route by placing the name of the file in brackets. ie: [id].js ==> :id

| Arguments | Result | |-------------------------------| ------------------------------------------------------------------------------------------------------------- | | -i --input | Path to watch for changes. Required. | | -o --output | Optional argument that takes a path to place output files in. Defaults to the input directory. | | -ext --extention | Optional argument to change the file extension of the output files. Defaults to .js . | | -p --pageProperties [type] | Optional boolean argument to disable generating page_properties file. Defaults to false. | | -b --build [type] | Optional boolean argument that tells the program to run once. Defaults to false. Intended for build commands. |

  "scripts": {
     "rfr": "rfr -d <path to pages folder>"
  }

Run the development server

npm run start

Run react-fs-router

npm run rfr

The program will then generate two files one containing imports and exports of all the files inside the provided path and one containing an array of objects describing each file. The properties in the mentioned object are as follows:

component: // Name of the default export of the file
name: // Name of the component mentioned in the file as // name: string
icon: // Name of the icon mentioned in the file as // icon: string
index: // A number by which the objects in this array are sorted by. mentioned in the file as // index: number
file: // The name of the file this object is for
path: // The path of this file in relation to its position in the folder structure. index files are always "/"

Name, icon and index can be written in each file as comments and react-fs-router will read and place them in the output file.

// name: Home
// icon: HomeOutlined
// index: 0

To use the generated files with react-router:

function App() {

  function renderComponent(key, module) {
    return module[key] || module["default"] || module;
  }

  function renderConponents(imports: Record<string, ReactNode>) {
    let renders = [];
    // Looping through the Pages import
    for (const [key, Value] of Object.entries(imports)) {
      const Component = renderComponent(key, Value);
      // Finding the correct route object.
      const route = routes.filter(
        (config) => config.component === Component.name
      )[0];

      renders.push(
        <Route exact={true} key={route.path} path={route?.path || ""}>
          <Component />
        </Route>
      );
    }
    return renders;
  }
  return <Switch>{renderConponents(Pages)}</Switch>;
}

Place this component inside BrowserRouter

<BrowserRouter>
   <App />
</BrowserRouter>

Using with Ant Pro Layout

The properties file generated by this library can be easily used with Ant Designs pro layout component. The following is an example using an hoc:

function Layout(Component) {
  return class extends React.Component {
    state = {
      path: "",
    };

    render() {
      const makeIcon = (Icon) => <Icon />;
      const loopMenuItem = (menus) =>
        // If name and icon are found in the file of the component, they will appear in the
        // pro layout menu with the specified name and icon.
        menus.map(({ icon, children, ...item }) => {
          return {
            ...item,
            icon: icon && makeIcon(Icons[icon]),
            children: children && loopMenuItem(children),
          };
        });

      return (
        <ProLayout
          menuItemRender={(item, dom) => (
            <Link
              onClick={() => this.setState({ path: item.path || "/" })}
              to={item.path}
            >
              {dom}
            </Link>
          )}
          menu={{ request: async () => loopMenuItem(routes) }}
          style={{ height: "100vh" }}
          location={{ pathname: this.state.path || window.location.pathname }}
        >
          <PageContainer>
            <Component {...this.props} />
          </PageContainer>
        </ProLayout>
      );
    }
  };
}

Usage with Concurrently

You can use concurrently to run rfr with react at the same time.

npm install -g concurrently

concurrently --kill-others "npm run start" "npm run rfr"

Caveats

1. Since all of the files are imported and re-exported, having two files with the same name as default export will cause an error.
2. Running this package along with the react start script is not recommended as it interferes with the react script. Consider using a package like concurrently for this purpose.

License

MIT