如何根据呈现的内容组件使我的蚂蚁设计Header名称动态化

如何解决如何根据呈现的内容组件使我的蚂蚁设计Header名称动态化

我正在使用 ant design 进行一个项目，其中我创建了一个单独的标题和内容组件。

这是我的标题组件。

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;

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

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

我想在路径位置显示标题名称为New Appoint，如果位置url是可以获取的

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

但在生产中我在位置 url 之间分配唯一的 id

示例：

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

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

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

解决方法

您可以使用正则表达式。

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

https://regexr.com/5kdju