## [Chicane](https://swan-io.github.io/chicane/)
```ts
import { createRouter } from "@swan-io/chicane";
import { match } from "ts-pattern";
export const Router = createRouter({
Home: "/",
UserList: "/users",
UserDetail: "/users/:userId",
});
const App = () => {
const route = Router.useRoute(["UserList", "UserDetail"]);
return match(route)
.with({ name: "UserList" }, () => <UserList />)
.with({ name: "UserDetail" }, ({ params }) => (
<UserDetail userId={params.userId} />
))
.otherwise(() => <NotFound />);
};
```
## [Tanstack router](https://tanstack.com/router/v1)
```tsx
import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import {
Outlet,
RouterProvider,
Link,
Router,
Route,
RootRoute,
} from '@tanstack/react-router'
// Create a root route
const rootRoute = new RootRoute({
component: Root,
})
function Root() {
return (
<>
<div>
<Link to="/">Home</Link> <Link to="/about">About</Link>
</div>
<hr />
<Outlet />
</>
)
}
// Create an index route
const indexRoute = new Route({
getParentRoute: () => rootRoute,
path: '/',
component: Index,
})
function Index() {
return (
<div>
<h3>Welcome Home!</h3>
</div>
)
}
const aboutRoute = new Route({
getParentRoute: () => rootRoute,
path: '/about',
component: About,
})
function About() {
return <div>Hello from About!</div>
}
// Create the route tree using your routes
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
// Create the router using your route tree
const router = new Router({ routeTree })
// Register your router for maximum type safety
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
// Render our app!
const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>,
)
}
```