如何根据呈现的内容组件使我的 ant design Header 名称动态化

Question

我正在使用 ant design 开发一个项目，我在其中创建了一个单独的 header 和内容组件。

这是我的 header 组件。

import React from "react";
import { Layout, Avatar, Row, Col, Popover, Button, Badge } from "antd";
import { withRouter } from "react-router-dom";
import { BellIcon, LeftArrowIcon } from "../../assets/svg/icons";
import { PoweroffOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import "./Header.css";
import { logout } from "../../actions/userActions";
const { Header } = Layout;

const GoBack = () => {
  return window.history.back();
};

const CustomHeader = withRouter((props) => {
  const dispatch = useDispatch();
  const { location } = props;
  let title = "";
  /*Header Dynamic Titles*/

  if (location.pathname === "/dashboard/home") {
    title = "Home";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients";
  } else if (location.pathname === "/dashboard/inventory") {
    title = "Inventory";
  } else if (location.pathname === "/dashboard/marketing") {
    title = "Marketing";
  } else if (location.pathname === "/dashboard/clients/appointment/new") {
    title = "New Appointment";
  } else if (location.pathname === "/dashboard/checkout") {
    title = "Checkout";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients Profile";
  }
  return (
    <Header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 1,
        width: "100%",
        backgroundColor: "#fff",
        paddingLeft: "1.1rem",
      }}
    >
      <Row>
        <Col order={1}>
          {location.pathname === "/dashboard/appointment/new" ? (
            <strong style={{ fontSize: "1.1rem" }}>
              <LeftArrowIcon style={{ marginRight: "1rem" }} onClick={GoBack} />
              {title}
            </strong>
          ) : location.pathname === "/dashboard/checkout" ? (
            <strong style={{ fontSize: "1.1rem" }}>
              <LeftArrowIcon style={{ marginRight: "1rem" }} onClick={GoBack} />
              {title}
            </strong>
          ) : (
            <strong style={{ fontSize: "1.1rem" }}> {title}</strong>
          )}
        </Col>
        <Col
          style={{
            marginLeft: "auto",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
          xxl={1}
          xs={1}
          sm={1}
          md={1}
          lg={1}
          order={2}
        >
          <Badge count={0}>
            <BellIcon shape='square' style={{ marginLeft: "2.9vw" }} />
          </Badge>
        </Col>
        <Col xxl={4} xs={4} sm={4} md={4} lg={5} order={3}>
          <Popover content={avtarDetails(dispatch)}>
            <Avatar
              style={{
                color: "#fff",
                backgroundColor: "purple",
                marginLeft: "6vw",
              }}
            >
              G
            </Avatar>
          </Popover>
        </Col>
      </Row>
    </Header>
  );
});

export default CustomHeader;

目前，我正在定位路由器路径名并使 headers 动态化。例如，

if (location.pathname === "/dashboard/home") {
    title = "Home";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients";
  } else if (location.pathname === "/dashboard/billing") {
    title = "Billing";
  } else if (location.pathname === "/dashboard/clients/appointment/new") {
    title = "New Appointment";
  } else if (location.pathname === "/dashboard/checkout") {
    title = "Checkout";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients Profile";
  }

header Location and image Header names through location

I want New Appointment as the header title

我想在路径位置显示header名称为新约会，如果位置url是

就可以得到

http://localhost:3000/dashboard/clients/appointment/new

但在生产中我在位置 url

之间分配唯一 ID

示例：

http://localhost:3000/dashboard/clients/6000459f0682ed4590889067/appointment/new

这里的 6000459f0682ed4590889067 是客户端的唯一标识，对于每个单独的客户端，该标识都是唯一的。现在如何将 header 动态名称设置为新约会。

请帮我解决这个问题。提前致谢。

Answer 1

您可以使用正则表达式。

^\/dashboard\/clients\/[A-Za-z0-9]{24}\/appointment\/new*$

https://regexr.com/5kdju

如何根据呈现的内容组件使我的 ant design Header 名称动态化

How to make my ant design Header name dynamic according to the content component rendered

reactjs

react-router

react-router-dom

antd

ant-design-pro