Installation: React Router

Core Idea

Same three-path pattern (create/CLI/existing). Uses ~/* import alias (like Remix, not @/*), and create-react-router pre-configures Tailwind + the alias automatically.

Key Concepts

• init -t react-router / --monorepo: standard CLI flags, same as other frameworks.
• ~/* alias: React Router (and Remix) use ~/components/ui/*, distinct from Next/Vite/Astro's @/*.
• npm create react-router@latest: pre-wires Tailwind CSS and the ~/* alias out of the box.

Code Examples

npm create react-router@latest
npx shadcn@latest init
npx shadcn@latest add button

import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

• O que demonstra: rota típica em app/routes/home.tsx usando o alias ~/.

Anti-patterns

• Copying @/components/ui/* imports from Next.js examples into a React Router project: wrong alias, use ~/.

Key Takeaways

1. React Router shares the ~/* alias convention with Remix, not the @/* used by Next/Vite/Astro/Laravel.
2. Monorepo: -c apps/web on add, import from @workspace/ui/components/card in apps/web/app/routes/*.

Connects To

• installation-remix: shares the ~/* alias convention.
• installation-next: contrast for the @/* alias frameworks.