Skip to content

ROUTING.md

Latest commit

 

History

History
73 lines (66 loc) · 2.01 KB

ROUTING.md

File metadata and controls

73 lines (66 loc) · 2.01 KB




Routing

Note: We are using React Router DOM under-the-hood, check the docs to get the most out of it

At src/renderer/screens create a folder named as My and inside this folder an index.tsx with the following content:

export function MyScreen() {
  return (
    <main>
      <h1>Hi from MyWindow! 😎</h1>
    </main>
  )
}

Then, at src/renderer/screens/index.ts, add the MyScreen component by its folder name My:

export * from './Another'
export * from './About'
export * from './Main'
export * from './My'

Now, at src/renderer/routes/index.tsx, register the MyScreen to the MyWindow like we did it:

import { WindowRouter, Route } from './modules'

import {
  AnotherScreen,
  AboutScreen,
  MainScreen,
  MyScreen,
} from 'renderer/screens'

export function AppRoutes() {
  return (
    <WindowRouter
      routes={{
        main: () => (
          <>
            <Route path="/" element={<MainScreen />} />
            <Route path="/anotherScreen" element={<AnotherScreen />} />
          </>
        ),
        about: () => <Route path="/" element={<AboutScreen />} />,
        myWindow: () => <Route path="/" element={<MyScreen />} />,
      }}
    />
  )
}

🧐 Note: the myWindow property must match the id you gave to your window in src/main So, all the routes in their method will have the basename as the window id (the property name), like myWindow.

myWindow: () => <Route path="/" element={<MyScreen />} />,

Or

myWindow: () => (
  <>
    <Route path="/" element={<MyScreen />} />
    <Route path="/second-screen" element={<MySecondScreen />} />
  </>
)

🎉