react 这种步骤操作应该怎样部署组件呢？

Question

如图所示，上面的三步是可点击的，也就是链了一个路由，但是这一长条流程怎

部署组件呢？我想要的路由应该是这样 ＃管道／构建和交付／构建和交付2，那么这样做每次都要套一个子路由，感觉好麻烦啊

大家有没有什么好的方法做呢？可以分享一下

Answer 1

参考一下antd的面包屑https://ant.design/components...

Answer 2

一楼说的挺好的，可以参考，我现在做的这个页面就是用这个的，只需要给面包屑加点击事件就可以了，类似这样

事件

 handleBread(i,name){
        console.log('点击面包屑的是谁',i,name)
        switch(i){
            case 0:
                document.location.href="#/user/hrboard/calculateSalaryIndex";
            break;
            case 1:
                document.location.href="#/user/hrboard/salarySetup";
            break;
        }
    }

Answer 3

做成单页tab的形式，把菜单抽象成一个组件，然后下面内容部分抽象成组件，这样一共就有4个组件。
1、菜单
2、内容组件1
3、内容组件2
4、内容组件3

接着，定义一个tabId表示当前激活的tab，3个内容组件封装成3个类，当激活相应的tabId的时候，就加载相应的内容组件。

有点复杂的就是3个tab的逻辑关系，tabId = 1是初始状态，当点击下一步，跳转到tabId = 2，那么就同时激活了2个tab，但是你现在需要显示的是第二个tab，那么tabId的数据结构就是一个数组最合适，只加载数组最后一个元素的tabId的内容组件。

不知你看懂了没，因为做过类似的功能