Skip to main content

Part 5: Migrate Components to Pages - The Transformation

· One min read
Mike Stabile
Mike Stabile
AI Integration Specialist & Developer

Your React components—freestanding, independent—are about to become Docusaurus pages.

The Old World: React Router​

Centralized routing with BrowserRouter, Routes, Route.

The New World: File-Based Routing​

Want a page at /about? Create src/pages/about.tsx.

The Wrapper Pattern​

import Layout from '@theme/Layout';
import YourComponent from '@site/src/components/YourComponent';

export default function YourPage(): JSX.Element {
  return (
    <Layout title="Page Title">
      <YourComponent />
    </Layout>
  );
}

The Modal Challenge​

Modals work, but you may need z-index fixes in CSS.

Animations Survive​

Framer Motion works perfectly in Docusaurus pages. For SSR issues:

if (typeof window === 'undefined') {
  return <div>Loading...</div>;
}

Next: Part 6 - Create Documentation: The Whole Point