关于react-router有没有办法实现隐藏和显示组件的功能

#1

就像tab页签切换一样 页签有 新建 删除 激活 3种操作
react-router好像只能实现 组件的挂载和移除
想问一下 隐藏 和 显示 有没有办法实现呢?

#2

组件的状态请通过组件的state机制去控制，比如tab功能，不需要改变路由，而是修改state来控制每个tab组件的状态。

#3

功能需求是做一个多页签之间的切换 就像网易邮箱打开多封邮件

两封邮件切换只是实现了隐藏和显示 还可以通过hash控制前进后退

#4

2个邮件的tab应该是属于同一页面下的不同窗口，不应该改变hash去控制它，把tab当成一个数组渲染出来的组件，并且每个tab有专门的key=“邮件id”，根据不同的key加载不同的数据显示到下面的content组件中。

如果做成hash来控制不同的tab，在同一个页面中点击返回按钮，只是改变tab的行为会变得很奇怪。

#5

其实需求就是做成像邮箱一样 新打开的能新增页签 切换能改变显示的内容
每个页签对应一个hash 之前的内容只是做隐藏 不移除
好像新浪邮箱也是类似的操作
完全不知道react-router该怎么做 :cry:

#6

不要在router上操作，这样比较麻烦，完全可以用react组件的思想去实现，每个页签都是一个组件

#7

react-router的主要功能就是用来切换页面的，并不是用来做状态控制的，可以通过控制组件的state来实现组件的隐藏和显示啊

#8

仅仅靠state来控制 好像不能实现通过浏览器前进后退来修改状态
浏览器的前进后退要靠router来控制
所以我想是不是可以 修改hash 就去判断对应页面组件的state是否存在 没有就挂载 有就去修改状态为显示 其他改为隐藏
可能我的思想还停留在jq的年代吧 :sob:

#9

当然可以，hash本身可以在在组件上读取到，类似分页，通常也是读取hash来加载不同页面的数据

#10

那不就是自己写一个简单的路由组件来控制了?
react-router是不是没办法满足这需求啊?
其实之前用jq的时候就是手写了一个很简单的方法来控制的
现在换成react想问一下有没有现成的方案能解决这问题 不想造轮子 :sob:

#11

可以的，这个需求不难，是你没有转变思路

#12

把状态放路由上就好了，比如 /foo/bar?tab=doing 和/foo/bar?tab=done，依次来呈现不同的 tab

#13

react-router切换的时候会根据配置移除之前的内容 挂载新的
现在的需求就是要实现不移除之前的 仅仅只是隐藏掉 再挂载新的
如果之前已经打开过得 就显示 不再重新挂载

难道真的只有放弃react-router 自己写一个出来? :sob: