{"id":13607122,"url":"https://github.com/ws-rush/unplugin-remix-router","last_synced_at":"2025-04-23T00:38:34.438Z","repository":{"id":221832068,"uuid":"755098719","full_name":"ws-rush/unplugin-remix-router","owner":"ws-rush","description":"This plugin streamlines React Router's routing setup with automatic file-based routing, requiring React Router 6.4+.","archived":false,"fork":false,"pushed_at":"2025-04-04T14:56:34.000Z","size":312,"stargazers_count":11,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T16:54:55.125Z","etag":null,"topics":["react","react-router","remix"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/unplugin-remix-router","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ws-rush.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-09T12:53:22.000Z","updated_at":"2025-03-07T12:33:45.000Z","dependencies_parsed_at":"2024-07-09T00:18:05.526Z","dependency_job_id":"809ebae1-222a-4169-b0bf-d4d916e9623c","html_url":"https://github.com/ws-rush/unplugin-remix-router","commit_stats":null,"previous_names":["ws-rush/unplugin-remix-router","ws-rush/unplugin-react-router"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ws-rush%2Funplugin-remix-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ws-rush%2Funplugin-remix-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ws-rush%2Funplugin-remix-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ws-rush%2Funplugin-remix-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ws-rush","download_url":"https://codeload.github.com/ws-rush/unplugin-remix-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348872,"owners_count":21415907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","remix"],"created_at":"2024-08-01T19:01:15.754Z","updated_at":"2025-04-23T00:38:34.403Z","avatar_url":"https://github.com/ws-rush.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["React"],"readme":"[![StandWithPalestine](https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/StandWithPalestine.svg)](https://stand-with-palestine.org)\n\n# unplugin-remix-router\n\n`unplugin-remix-router` generates a `react-router` file that depends on [remix v2](https://remix.run/docs/en/main/file-conventions/routes) file router convention.\n\n\u003eFor more information, please refer to the React Router [documentation](https://reactrouter.com/en/main). Note that it follows the Remix file convention.\n\n## Install\n\n```bash\npnpm i -D unplugin-remix-router\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport remixRouter from 'unplugin-remix-router/vite'\n\nexport default defineConfig({\n  plugins: [\n    remixRouter({ /* options */ }),\n  ],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport remixRouter from 'unplugin-remix-router/rollup'\n\nexport default {\n  plugins: [\n    remixRouter({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-remix-router/webpack')({ /* options */ })\n  ]\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport remixRouter from 'unplugin-remix-router/esbuild'\n\nbuild({\n  plugins: [remixRouter()],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Usage\n\n### Init\n\n```js\n// main.tsx\nimport { routes } from 'virtual:routes'\n\nexport const router = createBrowserRouter(routes)\ncreateRoot(document.getElementById('app')!).render(\n  \u003cStrictMode\u003e\n    \u003cRouterProvider router={router} /\u003e\n  \u003c/StrictMode\u003e,\n)\n```\n\n### Project Structure\n\nfor deep understanding how file based routing work, see examples in remix v2 [file router convention](https://remix.run/docs/en/main/file-conventions/routes)\n\n```sh\n- app/\n  - routes/\n    - _index.tsx\n    - about.tsx\n    - countries.tsx # layout\n    - countries.yemen/route.tsx\n    - countries.wusab/route.tsx\n  - routes.tsx # `index.html` and `routes.jsx` are the project starter point\n```\n\n### Route Content\n\nevery route can export one of following, see [React Router](https://reactrouter.com/en/main) for more.\n\nuse example in `playground/` as starter kit, or [reactive](https://github.com/ws-rush/reactive) template. also there is a version of official [react-router-tutorial](https://github.com/ws-rush/react-router-tutorial) with unplugin-remix-router\n\n```js\nexport const caseSensitive = false\n\nexport const id = 'main-page'\n\n// every `loader` should exported by name `clientLoader`\nexport async function clientLoader() {}\n\n// every `action` should exported by name `clientAction`\nexport async function clientAction() {}\n\n// every `middleware` should exported by name `clientMiddleware`\nexport const clientMiddleware = [/* put middlewares here */]\n\n// every component should exported as `default` no matter what is the name\nexport default function Component() {\n  return \u003ch1\u003eHello Remix Router!\u003c/h1\u003e\n}\n\nexport function ErrorBoundry() {\n  return \u003ch1\u003eSomething went wrong\u003c/h1\u003e\n}\n\nexport function shouldRevalidate({ currentUrl }) {\n  return currentUrl.pathname === '/meal-plans/new'\n}\n\nexport const handler = {\n  attachedData: {\n    key: 'value'\n  }\n}\n```\n\n## Typescript\n\nadd following to `vite-env.d.ts`\n\n```ts\ndeclare module 'virtual:routes' {\n  export const routes: any // Adjust the type accordingly based on your routes structure\n}\n```\n\n## Feauters\n\n### Lazy routes\n\nBy default, Vite and other JavaScript bundlers package all project files into a single file. While this is often beneficial, it can result in slower initial load times for the project. To address this, you can implement lazy loading for routes, allowing the bundler to split the code for each route into separate files. This approach can improve the performance of the initial load.\n\n`unplugin-remix-router` do it out-of-box, for fine-grained control add option `remixRouter({ lazy: 'suffix' })`, then simply add .lazy to route names (note: this applies only to routes, not components). Consequently, the project structure will look like this:\n\n```sh\n- app/\n  - routes/\n    - _index.tsx\n    - about.tsx\n    - countries.tsx\n    - countries.yemen/route.tsx\n    - countries.wusab/route.tsx\n  - main.tsx\n```\n\n### Access router methods globally\n\nMost React Router commands are accessed through hooks, such as `const navigate = useNavigate()`. However, there are times when you need to access these functions within state manager actions. By defining a global router in main.jsx, you can access many of these functions from anywhere in your application. Here’s how you can do it:\n\n```js\n// main.jsx\nimport { createBrowserRouter } from 'react-router'\nimport { createRoot } from 'react-dom/client'\n\nexport const router = createBrowser(/* ... */)\ncreateRoot(/* ... */)\n\n// Now you can import `router` from any file and use its methods\n// For example, to navigate programmatically:\nrouter.navigate('/login')\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fws-rush%2Funplugin-remix-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fws-rush%2Funplugin-remix-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fws-rush%2Funplugin-remix-router/lists"}