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

Question

[Сергей Шевченко]

Не могу понять как настроить что бы хлебные крошки отображались при навигации по меню.
Кто сможет помочь в этом не легком деле?
(Я вроде понимаю что нужно управлять состоянием определенного компонента при определенных событиях)

Вот репозиторий: https://github.com/Lancer-Serega/react-dashboard

Вот список файлов (Для быстрого просмотра):

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;

Comments

[Alexander Leonchik]

Залей в гит для наглядности

[Сергей Шевченко]

https://github.com/Lancer-Serega/react-dashboard

[Макс]

У меня есть небольшая спа на гитхабе, там присутствует breadcrumb. Здесь код.
Ключевые компоненты которые вам могут быть интересны:

1. viewer/Viewer.tsx
   
2. viewer/DiskBreadcrumb.tsx
   
3. app/common/Breadcrumb.tsx
   

Answer 1

[Дмитрий Pacification]

Мне кажется, что можно для такого случая использовать реакт роутер https://reacttraining.com/react-router/web/example...

Можно так же создать компоненту Breadcrumbs которая будет иметь свойство path, метод parseUrl который берет либо из текущего location, либо мы прокидываем руками (на ваш вкус и цвет), getPath будет возвращать значение и setPath будет принимать значение и предварительно его обрабатывать. И когда делаешь history.push дергать сеттер, который обновляет свойство (если все же выбрали прокидывать руками).