### Create a basic page component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/installation.mdx

Defines a simple React component named 'Page' that renders a greeting message. This serves as an example page for the router.

```tsx
export default function Page() {
	return <div>Hello another react router!</div>
}
```

--------------------------------

### Run another-react-router CLI init (Bash)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/installation.mdx

Executes the initialization command for the 'another-react-router' command-line interface to generate the necessary configuration file ('another-react-router.config.ts').

```bash
npx another-react-router init
```

--------------------------------

### Install another-react-router package (Bash)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/installation.mdx

Installs the 'another-react-router' package using the npm package manager.

```bash
npm install another-react-router
```

--------------------------------

### Starting Next.js Development Server (Bash)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/README.md

Provides commands to start the local development server for a Next.js application using different package managers like npm, yarn, pnpm, or bun. The server typically runs on http://localhost:3000.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install another-react-router with npm

Source: https://github.com/fesyse/another-react-router/blob/main/README.md

Installs the another-react-router package using the npm package manager.

```bash
npm install another-react-router
```

--------------------------------

### Install another-react-router with bun/yarn/pnpm

Source: https://github.com/fesyse/another-react-router/blob/main/README.md

Installs the another-react-router package using alternative package managers like bun, yarn, or pnpm.

```bash
(bun/yarn/pnpm) add another-react-router
```

--------------------------------

### Install another-react-router with npm

Source: https://github.com/fesyse/another-react-router/blob/main/packages/another-react-router/README.md

Installs the 'another-react-router' package using the npm package manager.

```bash
npm install another-react-router
```

--------------------------------

### Install another-react-router with other package managers

Source: https://github.com/fesyse/another-react-router/blob/main/packages/another-react-router/README.md

Installs the 'another-react-router' package using alternative package managers like Bun, Yarn, or pnpm.

```bash
(bun/yarn/pnpm) add another-react-router
```

--------------------------------

### Add AnotherReactRouterProvider component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/installation.mdx

Imports the 'AnotherReactRouterProvider' component and the generated 'routes' configuration, then wraps the main application content with the provider component, passing the routes.

```tsx
import { AnotherReactRouterProvider } from "another-react-router"
import { routes } from "another-react-router.config.ts"

export function App() {
	return <AnotherReactRouterProvider routes={routes} />
}
```

--------------------------------

### Example directory structure for routes

Source: https://github.com/fesyse/another-react-router/blob/main/README.md

Illustrates a typical directory structure where route files are placed within a 'src/routes' directory.

```json
{
  "src": {
    "routes": [
      "page.tsx"
    ]
  },
}
```

--------------------------------

### Example directory structure for routes

Source: https://github.com/fesyse/another-react-router/blob/main/packages/another-react-router/README.md

Illustrates a suggested directory structure for organizing route files within a React project using 'another-react-router'. This is a representation, not executable JSON.

```json
[
  "src": [
    "routes": [
      "page.tsx"
    ]
  ],
]
```

--------------------------------

### Configure tsconfig.json for path alias (JSON)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/installation.mdx

Modifies the 'tsconfig.json' file to add a path alias under 'compilerOptions.paths', allowing the 'another-react-router.config.ts' file to be imported using a simplified path.

```json
{
	// ... other options ...
	"compilerOptions": {
		// ... compiler options ...
		"paths": {
			"baseUrl": ".",
			"another-react-router.config.ts": ["another-react-router.config.ts"]
		}
	}
}
```

--------------------------------

### Example Params Object for Spread Route

Source: https://github.com/fesyse/another-react-router/blob/main/CHANGELOG.md

Illustrates the structure of the parameters object when using a spread route like '/store/[...slug]' with a pathname like '/store/987/164'. The 'slug' parameter becomes an array containing the segments.

```JSON
{
  "slug": ["987", "164"]
}
```

--------------------------------

### Checking Active Links with usePathname and Link in TSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/linking-and-navigating.mdx

Illustrates how to use the `usePathname` hook to get the current path and check if it matches a link's `href`, conditionally applying a class to style the active link.

```tsx
import { usePathname } from "another-react-router"
import { Link } from "@/components/link"

export function Links() {
	const pathname = usePathname()

	return (
		<nav>
			<Link className={`link ${pathname === "/" ? "active" : ""}`} href="/">
				Home
			</Link>

			<Link
				className={`link ${pathname === "/about" ? "active" : ""}`}
				href="/about"
			>
				About
			</Link>
		</nav>
	)
}
```

--------------------------------

### Defining Routes and HrefType in TypeScript

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/config.mdx

This snippet shows the structure of the auto-generated configuration file for 'another-react-router'. It imports necessary functions, defines an array of raw route objects with paths and dynamic imports, processes them to get route components, defines a union type 'HrefType' for valid link destinations, and exports the processed routes and the type. This file is intended to be automatically generated and should not be manually modified.

```typescript
// THIS FILE SHOULD NOT BE MODIFIED
// With love by another-react-router developers 💗
import { type RawRoute, getRoutesComponents } from "another-react-router"

const rawRoutes: RawRoute[] = [
	{ path: "/", page: import("./src/routes/page.tsx") },
	{ path: "/user/[id]/", page: import("./src/routes/user/[id]/page.tsx") }
]
const routes = await getRoutesComponents(rawRoutes)

type HrefType = "/" | `/user/${string}`

export { routes, type HrefType }
```

--------------------------------

### Using useSearchParams Hook in React

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/hooks/use-search-params.mdx

This example demonstrates how to use the `useSearchParams` hook from 'another-react-router' within a React component. It retrieves the current URL search parameters, converts them into an array of key-value pairs, and renders them as a list.

```tsx
import { useSearchParams } from "another-react-router"

export const ExampleComponent = () => {
	const searchParams = useSearchParams()

	return (
		<div>
			<h1>Search Params:</h1>
			<ul>
				{Array.from(searchParams.entries()).map(([key, value]) => (
					<li key={key}>
						{key}: {value}
					</li>
				))}
			</ul>
		</div>
	)
}
```

--------------------------------

### Using useRouter Hook in a React Component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/hooks/use-router.mdx

This example demonstrates how to import and utilize the `useRouter` hook within a React functional component. It shows how to access the current pathname and trigger various navigation actions like pushing new routes, navigating back/forward, and refreshing the current route using button click handlers.

```tsx
import { useRouter } from "another-react-router"
import { Breadcrumbs } from "@/components/ui/breadcrumbs"
import { Button } from "@/components/ui/button"

function Navigation() {
	const router = useRouter()

	return (
		<nav className="navigation">
			<Breadcrumbs pathname={router.pathname} />
			<Button onClick={() => router.push("/home")}>Home</Button>
			<Button onClick={() => router.push("/about")}>About</Button>
			<Button onClick={() => router.push("/contact")}>Contact</Button>
			<Button onClick={() => router.back()}>Back</Button>
			<Button onClick={() => router.forward()}>Forward</Button>
			<Button onClick={() => router.refresh()}>Refresh</Button>
		</nav>
	)
}
```

--------------------------------

### Wrapping Provider in router.tsx (Inline Nested Routes)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/components/provider.mdx

Illustrates how to define the route configuration array (`routes`) directly within the component that uses `AnotherReactRouterProvider`. This example shows a more complex, nested route structure defined inline, highlighting the flexibility of configuring routes without external files.

```tsx
import {
	AnotherReactRouterProvider,
	type RouteWithComponent
} from "another-react-router"
import { HomeLayout, HomePage } from "@/routes/home-page"
import { VideoPage } from "@/routes/video-page"

export function RouterProvider() {
	const routes: RouteWithComponent[] = [
		{
			path: "/",
			page: HomePage,
			layout: HomeLayout,
			routes: [
				{
					path: "/video/",
					page: VideoPage,
					routes: [
						{
							path: "/video/[id]/",
							page: VideoPage,
							routes: []
						}
					]
				}
			]
		}
	]
	return <AnotherReactRouterProvider routes={routes} />
}
```

--------------------------------

### Displaying CLI Usage - arr - txt

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/cli.mdx

This snippet shows the basic usage syntax for the `arr` command-line tool, listing available options and commands like `init` and `help`.

```txt
Usage: arr [options] [command]

cli that helps configuring your router with another-react-router npm package

Options:
  -v, --version   display the version number
  -h, --help      display help for command

Commands:
  init [options]
  help [command]  display help for command
```

--------------------------------

### Initialize router configuration with CLI

Source: https://github.com/fesyse/another-react-router/blob/main/README.md

Runs the another-react-router command-line interface to generate the initial router configuration file.

```bash
npx arr init
```

--------------------------------

### Initialize another-react-router CLI

Source: https://github.com/fesyse/another-react-router/blob/main/packages/another-react-router/README.md

Runs the command-line interface tool provided by 'another-react-router' to initialize the router configuration.

```bash
npx arr init
```

--------------------------------

### Displaying init Command Usage - arr - txt

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/cli.mdx

This snippet details the usage and available options for the `arr init` command, which is used to generate the router configuration file. Options include flags for watching files, specifying output format (TypeScript/ESM), and configuring input/output paths.

```txt
Usage: arr init [options]

Options:
  -w, --watch            check if routes path should be watching for file changes, and regenerate config if it is.
                         (default: false)
  -ts, --ts              check if config file output will be written with typescript rules. (default: true)
  -e, --esm              check if config file output will be written with esm rules. (default: false)
  -r, --routes [routes]  the path to your routes. (default: "./src/routes/")
  -c, --config [config]  the path where another-react-router.config.(ts/js) file will be initialized. (default: "./")
  -cw, --cwd <cwd>       the working directory. defaults to the current directory. (default:
                         "CWD_PATH")
  -h, --help             display help for command
```

--------------------------------

### Using the useRouter Hook for Navigation in TSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/linking-and-navigating.mdx

Demonstrates how to use the `useRouter` hook to programmatically navigate by calling methods like `router.push()` in response to an event, such as a button click.

```tsx
import { useRouter } from "another-react-router"

export default function Page() {
	const router = useRouter()

	return (
		<button type="button" onClick={() => router.push("/dashboard")}>
			Dashboard
		</button>
	)
}
```

--------------------------------

### Using the Link Component in TSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/linking-and-navigating.mdx

Demonstrates the basic usage of the <Link> component for navigation, importing it and rendering it with a `href` prop to link to another route.

```tsx
import { Link } from "@/components/link"

export default function Page() {
	return <Link href="/dashboard">Dashboard</Link>
}
```

--------------------------------

### Configuring Parallel Watch Script - package.json - json

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/cli.mdx

This JSON snippet demonstrates how to modify the `scripts` section in a `package.json` file to run the `arr init --watch` command in parallel with a development server or bundler (like Vite) using a shell command. This allows the router configuration to be automatically regenerated whenever route files change.

```json
{
	// ... other options ...
	"scripts": {
		// ... other scripts ...
		"dev": "sh -c 'vite & bun arr init --watch'"
	}
}
```

--------------------------------

### Configure Vite Dev Script with another-react-router Watch

Source: https://github.com/fesyse/another-react-router/blob/main/CHANGELOG.md

Modifies the 'dev' script in a package.json file to run the 'another-react-router init --watch' command and the 'vite' command concurrently using a shell script.

```Shell
"dev": "sh -c 'bunx another-react-router init --watch & vite'"
```

--------------------------------

### Create RouterProvider component (router-provider.tsx)

Source: https://github.com/fesyse/another-react-router/blob/main/README.md

Creates a wrapper component that uses AnotherReactRouterProvider and passes the generated routes configuration to it.

```tsx
// ./src/components/providers/router-provider.tsx
import { AnotherReactRouterProvider } from "another-react-router"
import { routes } from "../../../another-react-router.config.ts"

export const RouterProvider = () => (
  <AnotherReactRouterProvider routes={routes} />
)
```

--------------------------------

### Creating a Basic Page Component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/defining-routes.mdx

This snippet demonstrates how to create a basic page component using the file-system routing convention. By exporting a default React function component from a 'page.tsx' file within a route directory, you define the UI that will be rendered when that route segment is accessed. This component simply returns an H1 element.

```tsx
export default function Page() {
	return <h1>Hello, Next.js!</h1>
}
```

--------------------------------

### Create a basic route component (page.tsx)

Source: https://github.com/fesyse/another-react-router/blob/main/README.md

Defines a simple React component that serves as a route page, returning a basic div element.

```tsx
// ./src/routes/page.tsx

export default function Page() {
  return <div>Hello another react router!</div>
}
```

--------------------------------

### Create the RouterProvider component

Source: https://github.com/fesyse/another-react-router/blob/main/packages/another-react-router/README.md

Creates a React component that wraps the 'AnotherReactRouterProvider' from the library, passing the generated route configuration.

```tsx
// ./src/components/providers/router-provider.tsx
import { AnotherReactRouterProvider } from "another-react-router"
import { routes } from "../../../another-react-router.config.ts"

export const RouterProvider = () => (
  <AnotherReactRouterProvider routes={routes} />
)
```

--------------------------------

### Scrolling to an ID with Link Component in JSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/linking-and-navigating.mdx

Shows how to use the <Link> component to navigate to a specific section on a page by including a hash identifier (`#id`) in the `href` prop.

```jsx
<Link href="/dashboard#settings">Settings</Link>
```

--------------------------------

### Linking to Dynamic Segments with Link Component in TSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/linking-and-navigating.mdx

Shows how to generate a list of links to dynamic routes using the <Link> component with template literals and interpolation, typically within a map function over a data array.

```tsx
import { Link } from "@/components/link"

export default function PostList({ posts }) {
	return (
		<ul>
			{posts.map(post => (
				<li key={post.id}>
					<Link href={`/blog/${post.slug}`}>{post.title}</Link>
				</li>
			))}
		</ul>
	)
}
```

--------------------------------

### Integrate RouterProvider into the main app (app.tsx)

Source: https://github.com/fesyse/another-react-router/blob/main/README.md

Includes the custom RouterProvider component in the main application entry point to enable routing.

```tsx
// ./src/app.tsx
import { RouterProvider } from "@/components/providers/router-provider.tsx"

export const App = () => <RouterProvider />
```

--------------------------------

### Fetching User Profile with useParams and React Query (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/hooks/use-params.mdx

This snippet demonstrates how to use the `useParams` hook from 'another-react-router' to extract dynamic route parameters (like a user ID) and then use `@tanstack/react-query` to fetch data based on that parameter. It displays a loading spinner while fetching and the user profile once loaded.

```tsx
import { useQuery } from "@tanstack/react-query"
import { useParams } from "another-react-router"
import { Spinner } from "@/components/ui/spinner"
import { useService } from "@/services/user.service"

export default function ProfilePage() {
	const params = useParams()
	const { data: user, isLoading } = useQuery({
		queryKey: ["user", params.id],
		queryFn: () => userService.getById(params.id)
	})

	return isLoading || !user ? (
		<Spinner />
	) : (
		<div className="profile-wrapper">
			<Avatar src={user.avatar} />
			<h2 className="profile-username">{user.username}</h2> qq
		</div>
	)
}
```

--------------------------------

### Create a basic route component (page.tsx)

Source: https://github.com/fesyse/another-react-router/blob/main/packages/another-react-router/README.md

Defines a simple React component for a route page, which will be automatically discovered by 'another-react-router'.

```tsx
// ./src/routes/page.tsx

export default function Page() {
  return <div>Hello another react router!</div>
}
```

--------------------------------

### Defining Root Route Page Component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/pages-and-layouts.mdx

Defines the root page component for the `/` URL using the `page.tsx` file. It exports a default React functional component that renders the UI for this route.

```tsx
// `/src/routes/page.tsx` is the UI for the `/` URL
export default function Page() {
	return <h1>Hello, Home page!</h1>
}
```

--------------------------------

### Creating the typesafe Link component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/components/link.mdx

This snippet provides the implementation for a typesafe `Link` component required by `another-react-router`. It imports necessary types like `HrefType` and `LinkComponent` from the router's config and React types. The component itself is a simple functional component that renders an `<a>` tag, spreading all received props onto it, ensuring the `href` prop adheres to the `HrefType` definition for typesafe internal navigation.

```tsx
import {
	type HrefType,
	type LinkComponent
} from "another-react-router.config.ts"
import type { AnchorHTMLAttributes, DetailedHTMLProps, FC } from "react"

export const Link: LinkComponent<HrefType> = props => <a {...props} />
```

--------------------------------

### Defining useRouter Return Type (TypeScript)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/hooks/use-router.mdx

This TypeScript interface defines the structure of the object returned by the `useRouter` hook, including properties for the current pathname and methods for programmatic navigation (push, replace, back, forward) and refreshing the route.

```ts
interface Router {
	pathname: string
	push: (pathname: string) => void
	replace: (pathname: string) => void
	refresh: () => void
	back: () => void
	forward: () => void
}
```

--------------------------------

### Wrapping Provider in router.tsx (Imported Routes)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/components/provider.mdx

Shows how to wrap the `AnotherReactRouterProvider` in a dedicated component (`RouterProvider`). This approach can help keep the main application component cleaner and is an alternative to direct integration, still using routes imported from an external configuration file.

```tsx
import { AnotherReactRouterProvider } from "another-react-router"
import { routes } from "another-react-router.config.ts"

export function RouterProvider() {
	return <AnotherReactRouterProvider routes={routes} />
}
```

--------------------------------

### Integrating Provider in app.tsx (Imported Routes)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/components/provider.mdx

Demonstrates how to integrate the `AnotherReactRouterProvider` directly into the main application component (`App`), importing the route configuration from a separate file (`another-react-router.config.ts`). This is a common pattern for centralizing route definitions.

```tsx
import { AnotherReactRouterProvider } from "another-react-router"
import { routes } from "another-react-router.config.ts"

export function App() {
	return <AnotherReactRouterProvider routes={routes} />
}
```

--------------------------------

### Add RouterProvider to the main application

Source: https://github.com/fesyse/another-react-router/blob/main/packages/another-react-router/README.md

Integrates the custom RouterProvider component into the main application entry point, enabling routing for the application.

```tsx
// ./src/app.tsx
import { RouterProvider } from "@/components/providers/router-provider.tsx"

export const App = () => <RouterProvider />
```

--------------------------------

### Defining Nested Route Page Component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/pages-and-layouts.mdx

Defines the page component for the `/dashboard` URL by placing a `page.tsx` file inside the `dashboard` directory. It exports a default React functional component for this specific route.

```tsx
// `/src/routes/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
	return <h1>Hello, Dashboard Page!</h1>
}
```

--------------------------------

### Defining Nested Route Layout Component (TSX)

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/pages-and-layouts.mdx

Defines a shared layout component for the `/dashboard` route segment using the `layout.tsx` file. It exports a default React functional component that accepts `children` (representing nested layouts or pages) and can include shared UI elements like navigation.

```tsx
export default function DashboardLayout({
	children // will be a page or nested layout
}: React.PropsWithChildren) {
	return (
		<section>
			{/* Include shared UI here e.g. a header or sidebar */}
			<nav></nav>

			{children}
		</section>
	)
}
```

--------------------------------

### Manually Typing Dynamic Segment Params in TSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/dynamic-routes.mdx

Illustrates how to manually define the TypeScript type for the `params` prop in a page component for a dynamic route segment `[slug]`. This approach can be used instead of relying on types provided by the router package.

```tsx
export default function Page({ params }: { params: { slug: string } }) {\n\treturn <h1>My Page</h1>\n}
```

--------------------------------

### Accessing Dynamic Segment Params in TSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/routing/dynamic-routes.mdx

Demonstrates how to create a page component for a dynamic route segment `[slug]` using TypeScript. It utilizes the `PageProps` type from the `another-react-router` package to access the dynamic segment value via the `params` prop.

```tsx
import { type PageProps } from "another-react-router"\n\nexport default function Page({ params }: PageProps) {\n\treturn <div>My Post: {params.slug}</div>\n}
```

--------------------------------

### Using usePathname Hook in TSX

Source: https://github.com/fesyse/another-react-router/blob/main/docs/src/content/docs/hooks/use-pathname.mdx

This snippet demonstrates how to import and use the `usePathname` hook within a React functional component to retrieve and display the current URL pathname. It requires the `another-react-router` library.

```tsx
import { usePathname } from "another-react-router"

export const Component = () => {
	const pathname = usePathname()
	return <div>Current pathname: {pathname}</div>
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.