@velox/router Stable

Named-route history-stack router for VeloxKit desktop apps. No URLs, no file system — just a stack of { name, params } entries.

Install

npm install @velox/router

Quick start

import { Router, Route } from '@velox/router'
import HomeScreen from './screens/HomeScreen'
import SettingsScreen from './screens/SettingsScreen'
 
export default function App() {
  return (
    <Router initialRoute="home">
      <Route name="home"     component={HomeScreen} />
      <Route name="settings" component={SettingsScreen} />
    </Router>
  )
}

API

`<Router>`

Prop	Type	Default	Description
`initialRoute`	`string`	first declared route	Name of the initial screen
`children`	`ReactNode`	—	`<Route>` declarations

Renders the component for the current history entry. Only the active screen is rendered.

`<Route>`

Prop	Type	Description
`name`	`string`	Route identifier — used with `navigate()`
`component`	`ComponentType`	Screen component to render

Route declarations always render null — they are read by <Router> at mount time.

`useNavigate()`

const navigate = useNavigate()

Returns the navigate function. Stable across renders.

navigate('detail', { id: 42 })           // push
navigate('back')                          // pop
navigate('home', {}, { replace: true })  // replace top of stack

Argument	Type	Description
`name`	`string`	Route name — or `'back'` to pop
`params`	`object`	Optional params passed to the screen
`opts.replace`	`boolean`	Replace current entry instead of pushing

`useRoute()`

const { name, params, canGoBack } = useRoute()

Returns the current route state.

Field	Type	Description
`name`	`string \| null`	Current route name
`params`	`object`	Params passed via `navigate()`
`canGoBack`	`boolean`	`true` when history stack depth > 1

Full guide

See the Routing guide for patterns, sidebar layouts, TypeScript types, and back-button examples.

@velox/testing @velox/store