[refactor] rewrite withRouter() with full ES class syntax to support ES decorator stage-3

[Copilot]

This PR adds support for using withRouter() as an ECMAScript Decorator (stage-3) while maintaining full backward compatibility with the existing Higher-Order Component (HOC) pattern.

Changes Made

Updated the withRouter() function to support both usage patterns:

NEW: Decorator Usage

@withRouter
export class RoutePage extends PureComponent<
    RouteComponentProps<{ id: string }, {}, { extra: number }>
> {
    render() {
        const { id } = this.props.match.params;
        const { extra } = this.props.query;
        return <div>ID: {id}, extra: {extra}</div>;
    }
}

EXISTING: HOC Usage (Backward Compatible)

class RoutePage extends PureComponent<RouteComponentProps> {
    render() {
        const { id } = this.props.match.params;
        return <div>ID: {id}</div>;
    }
}
export default withRouter(RoutePage);

Technical Implementation

• Enhanced Class Pattern: Creates a new class that extends the original class and injects router props
• Hook Integration: Uses React Router hooks (useLocation, useParams) via a functional wrapper component
• Type Safety: Maintains full TypeScript type safety with generic constraints
• Static Property Preservation: Copies static properties from the original class to the enhanced class
• Single Implementation: Uses one generic function that works for both patterns

Validation

• ✅ TypeScript compilation succeeds with decorator syntax (@withRouter)
• ✅ Build process completes without errors
• ✅ Generated type definitions include proper generic signature
• ✅ Both usage patterns compile and work correctly
• ✅ Backward compatibility maintained - no breaking changes
• ✅ All existing functionality preserved

The implementation allows developers to use modern decorator syntax while ensuring existing code continues to work without modification.

Major changes

1. [refactor] rewrite withRouter() with full ES class syntax to support ES decorator stage-3 (Fixes make withRouter() working with ECMAScript Decorator stage-3 #4)
2. [add] Preview page in Document folder

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

@TechQuery 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.