Who can help me customize the display of breadcrumbs in React?

Question

typescript

I can't figure out how to set up breadcrumbs to be displayed when navigating through the menu.
Who can help in this difficult task?
(I kind of understand that you need to manage the state of a certain component on certain events)
Here is the repository: https://github.com/Lancer-Serega/react-dashboard
Here is a list of files (For a quick view):

spoiler

App.tsx

import * as React from "react";
import Layout from "./components/Layout/Layout";

export class App extends React.Component {
    public render() {
        return (
            <Layout />
        );
    }
}

layout.tsx

import React, {Component} from "react";
import {Layout as BaseLayout} from "antd";
import Header from "./Header";
import Content from "./Content";
import Footer from "../Footer";
import Sider from "./Sider";

class Layout extends Component {
    public render() {
        return (
            <BaseLayout style={{minHeight: "100vh"}}>
                <Sider />
                <BaseLayout>
                    <Header />
                    <Content />
                    <Footer />
                </BaseLayout>
            </BaseLayout>
        )
    }
}

export default Layout;

Sider.tsx

import React, {Component} from "react";
import Menu from '../Menu';
import {Layout} from "antd";

const BaseSider = Layout.Sider;

class Sider extends Component {
    public state = {
        collapsed: false
    };

    private onCollapse = (collapsed: boolean) => {
        this.setState({collapsed});
    };

    public render() {
        return (
        <BaseSider collapsible={true} collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
            <div className="logo" />
            <Menu />
        </BaseSider>
        )
    }
}

export default Sider;

Menu.tsx

import React, { Component } from "react";
import {Icon, Menu as BaseMenu} from "antd";
import {SelectParam} from "antd/lib/menu";
import {navigate} from "@reach/router";

class Menu extends Component {

    private handleNavigate = (selected: SelectParam) => {
        navigate(`${selected.keyPath}`);
    };

    public render() {
        const SubMenu = BaseMenu.SubMenu;

        return (
            <BaseMenu theme="dark" onSelect={this.handleNavigate} mode="inline">
                <SubMenu
                    key="users"
                    title={<span><Icon type="user" /><span>Users</span></span>}
                >
                    <BaseMenu.Item key="/users">List</BaseMenu.Item>
                </SubMenu>
                <SubMenu
                    key="posts"
                    title={<span><Icon type="file-text" /><span>Posts</span></span>}
                >
                    <BaseMenu.Item key="/posts">List</BaseMenu.Item>
                </SubMenu>
            </BaseMenu>
        )
    }
}

export default Menu;

content.tsx

import React, {Component} from "react";
import Breadcrumbs from '../Breadcrumbs';
import {Layout as BaseLayout} from "antd";
import {Router, navigate} from "@reach/router";

import {Form as PostForm} from "../../Posts/Form";
import {List as PostsList} from "../../Posts/List";
import {Form as UserForm} from "../../Users/Form";
import {List as UsersList} from "../../Users/List";

const BaseContent = BaseLayout.Content;

class Content extends Component {
    public render() {
        return (
            <BaseContent style={{margin: "0 16px"}}>
                <Breadcrumbs />
                <div style={{padding: 24, background: "#fff", minHeight: 360}}>
                    <Router>
                        <UsersList path={"/users"} />
                        <UserForm path={"/users/:id"} />
                        <PostsList path={"/posts"} />
                        <PostForm path={"/posts/:id"} />
                    </Router>
                </div>
            </BaseContent>
        )
    }
}

export default Content;

Breadcrumbs.tsx

import React, {Component} from "react";
import {Breadcrumb as BaseBreadcrumb} from 'antd';

class Breadcrumbs extends Component {
    public render() {
        return (
            <BaseBreadcrumb style={{margin: "16px 0"}}>
                <BaseBreadcrumb.Item> / </BaseBreadcrumb.Item>
            </BaseBreadcrumb>
        )
    }
}

export default Breadcrumbs;

Answer 1

It seems to me that for such a case you can use react router https://reacttraining.com/react-router/web/example...
You can also create a Breadcrumbs component that will have a path property, a parseUrl method that takes either from the current location, or we throw hands (to your taste and color), getPath will return a value and setPath will take the value and pre-process it. And when you do history.push, pull the setter that updates the property (if you still choose to push it with your hands).