File-system based routing for React.
npm install react-fs-routerA cli library for implementing file-system based routing in React applications.
Use yarn or npm to install react-fs-router
``bash`
yarn add react-fs-router
`bash`
npm install react-fs-router
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
| -o --output
`JSON`
"scripts": {
"rfr": "rfr -d
}
Run the development server
`bash`
npm run start
Run react-fs-router
`bash`
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:
`javascript
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.
`javascript`
// name: Home
// icon: HomeOutlined
// index: 0
To use the generated files with react-router:
`javascript xml react
function App() {
function renderComponent(key, module) {
return module[key] || module["default"] || module;
}
function renderConponents(imports: Record
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(
);
}
return renders;
}
return
}
`
Place this component inside BrowserRouter
`xml`
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:
`javascript xml
function Layout(Component) {
return class extends React.Component {
state = {
path: "",
};
render() {
const makeIcon = (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 (
to={item.path}
>
{dom}
)}
menu={{ request: async () => loopMenuItem(routes) }}
style={{ height: "100vh" }}
location={{ pathname: this.state.path || window.location.pathname }}
>
);
}
};
}
`
You can use concurrently to run rfr with react at the same time.
`bash`
npm install -g concurrently
`bash``
concurrently --kill-others "npm run start" "npm run rfr"
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.