Кто сможет помочь настроить отображение хлебных крошек в React?

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

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

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;

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;

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;

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;

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;