전자 라우터 DOM이 여기 있습니다!

Electron과 함께 react-router-dom을 이미 사용해 보았지만 개발 및 프로덕션과 다른 창에서 모두 작동하는 데 어려움이 있었다면 이 라이브러리가 적합합니다 🚀

특징

🚀 개발 및 프로덕션 환경을 위한 준비 완료

🔥 여러 창에서 작동함

📦 창 ID별로 격리된 경로

설치

터미널에서 다음을 실행합니다.

yarn add electron-router-dom

# OR

npm i electron-router-dom

라우터 DOM은 아직 설치하지 않았거나 패키지 관리자가 자동으로 처리하지 않는 경우 피어 종속성이므로 다음을 실행하십시오.

yarn add react-router-dom

# OR

npm i react-router-dom

용법

명심해야 할 주요 사항은 createFileRoute 및 createURLRoute 함수에서 사용되는 Electron Main Process와 <Router> 구성 요소 소품 이름의 Electron Renderer Process에서 동일한 창 ID를 사용해야 한다는 것입니다.

전자 주요 공정

import {
  app,
  BrowserWindow,
  BrowserWindowConstructorOptions as WindowOptions,
} from 'electron'

import { createFileRoute, createURLRoute } from 'electron-router-dom'
import { join } from 'path'

function createWindow(id: string, options: WindowOptions = {}) {
  const window = new BrowserWindow({
    width: 700,
    height: 473,
    ...options,
  })

  const devServerURL = createURLRoute(process.env['ELECTRON_RENDERER_URL']!, id)

  const fileRoute = createFileRoute(
    join(__dirname, '../renderer/index.html'),
    id
  )

  process.env.NODE_ENV === 'development'
    ? window.loadURL(devServerURL)
    : window.loadFile(...fileRoute)

  return window
}

app.whenReady().then(() => {
  createWindow('main', {
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
    },
  })

  createWindow('about', {
    width: 450,
    height: 350,
    show: false,
  })
})

전자 렌더러 프로세스

routes.tsx 파일을 생성합니다.

import { Router, Route } from 'electron-router-dom'

import { MainScreen, AboutScreen, SearchScreen } from './screens'

export function AppRoutes() {
  return (
    <Router
      main={
        <>
          <Route path="/" element={<MainScreen />} />
          <Route path="/search" element={<SearchScreen />} />
        </>
      }
      about={<Route path="/" element={<AboutScreen />} />}
    />
  )
}

그런 다음 AppRoutes에서 index.tsx를 가져옵니다.

import ReactDom from 'react-dom/client'
import React from 'react'

import { AppRoutes } from './routes'

ReactDom
  .createRoot(document.querySelector('app') as HTMLElement)
  .render(
    <React.StrictMode>
      <AppRoutes />
    </React.StrictMode>
  )

MainScreen 구성 요소의 간단한 예:

import { useNavigate } from 'react-router-dom'

// The "App" comes from the context bridge in preload/index.ts
const { App } = window

export function MainScreen() {
  const navigate = useNavigate()

  return (
    <main>
      <button onClick={() => navigate('/search')}>Go to Search screen</button>

      <button onClick={App.OpenAboutWindow}>Open About window</button>
    </main>
  )
}

이 라이브러리에 대한 자세한 정보를 얻으려면,
확인 Electron Router DOM GitHub Repository

감사합니다 💜