Pageheader Component Alternatives

[biruelrick]

Hi, I migrated my project from 4.24.1 to 5.0.2, the pageheader component was removed and I get the message 'Attempted import error: 'PageHeader' is not exported...'.

What best practice to migrate my old pageheader, is there another similar component in version 5.0.2?

Thanks
Ricardo Biruel

[zombieJ]

As migration doc mentioned. It move to pro components to get fully function interactive with ProLayout. But you can still use single PageHeader on it:

https://procomponents.ant.design/en-US/components/page-header

[vitali-duckma]

how to use pro and normal antd together? by simply installing them??

[abenhamdine]

yes

[vitalijalbu]

Hi, I migrated my project from 4.24.1 to 5.0.2, the pageheader component was removed and I get the message 'Attempted import error: 'PageHeader' is not exported...'.

What best practice to migrate my old pageheader, is there another similar component in version 5.0.2?

Thanks Ricardo Biruel

I created my own, similar to their. If wish I can share the code

[lamhungypl]

Hi @vitalijalbu could you please share your implementation?

[vitalijalbu]

'use client';
import Link from "next/link";
import React, { useState, useEffect } from "react";
import { Row, Col, Avatar, Button, Space, Menu, Typography } from "antd";
import { IconChevronLeft, IconStar } from "@tabler/icons-react";
const { Text, Title } = Typography;

const PageActions = (props) => {

  return (
    <div className="page-heading my-2">
      <Row align="top" className="mb-1">
        <Col>
          <Space align="start">
            {props.backUrl && (
              <Link href={props.backUrl}>
                <Button icon={<IconChevronLeft className="anticon" />} />
              </Link>
            )}
            <div>
              <Title level={5}>{props.title}</Title>
              {props.subTitle && <Text type="secondary">{props.subTitle}</Text>}
              {props.footer && props.footer}
            </div>
          </Space>
        </Col>
        <Col flex="auto" style={{ textAlign: "right" }}>
          <Space>{props.extra}</Space>
        </Col>
      </Row>
      <Row>
      {React.Children.map(props.children, (child, index) => (
      <span key={index} className="page-actions_meta">{child}</span>
    ))}

</Row>

    </div>
  );
};

export default PageActions;

Use it like this:

 <PageActions
                title="Business Partner"
                extra={[<Link href="/business-partners/create" key="1">
                    <Button type="primary">Add new</Button>
                </Link>]}
            />

[jatinbharadwaj]

antd v4 to v5 migration

refer to this document they have given back compatibility

Insight💡
update this
import "antd/dist/antd.css"
to
import "antd/dist/reset.css";

and
import { PageHeader } from '@ant-design/pro-layout';
also,
update/add dependencies in package.json

ant-design/compatible": "^5.1.2",
ant-design/icons": "^5.2.5",

[youngelit0812]

It works well
Thank you for your help!!!