Solid Routify

Fri Aug 13 2021 16:05:16 GMT+0000 (Coordinated Universal Time)

Example File Structure

pages/
├── index.jsx
├── users.jsx
└── users/
    └── _id.jsx

Install Packages

pnpm i -D chokidar npm-run-all solid-app-router vue-route-generator-jsx

Set Up package.json in scripts Section

    "dev": "run-p dev:*",
    "dev:vite": "vite",
    "dev:routify": "node routify.js -w",
    "build": "node routify.js && vite build",
    "serve": "vite preview"

Create routify.js

const {writeFileSync} = require('fs')
const {generateRoutes} = require('vue-route-generator-jsx')
const {watch} = require('chokidar')

function generate(){
  writeFileSync('./src/routes.js', generateRoutes({
    pages: './src/pages'
  }))
}

if (process.argv[2] == '-w') {
  const watcher = watch('./src/pages')
  watcher.on('add', () => generate())
  watcher.on('unlink', () => generate())  
} else {
  generate()
}

Set Up src/App.jsx

import {Router, useRoutes} from 'solid-app-router'
import routes from './routes'

export default function(){
  const Routes = useRoutes(routes)
  return <Router>
    <Routes></Routes>
  </Router>
}

Create src/pages/index.jsx File

export default function(){
    return <h1>Hello World</h1>
}

Run

npm run dev

Build

npm run build

Jawaban komentar

apalagi nech

Routing file based pada Solid.

Buat yang mau donasi untuk kelangsungan komunitas Echlus, silahkan transfer ke halaman donasi kami.

apalagi nech