Antd Design Pro2 多页签下,两个路由使用同一组件,页面如何独立

#1

https://segmentfault.com/q/1010000016866230

求助朋友们。
Antd Design Pro2 多页签下,两个路由使用同一组件,页面如何独立

链接里面就是具体问题描述。朋友们,若有解决方案,恳请留言相助。

#3

???????

#4

这种标签模式在本地应用中没什么毛病,但在web游览器中他其实和游览器行为是完全对立的。

标签模式和传统路由的冲突

传统路由如react-router之类的东西, 都是用过监听游览器路径来实现路由的, 所以路由入口是唯一的。
而标签模式下, 很难单纯通过url识别究竟是新建一个标签,还是在更新某个标签内部的页面内容, 需要通过用户行为来识别。

例子

操作1 用户点击菜单打开 /pageA
操作2 然后又点击菜单打开 /pageB
操作3 最后点击游览器返回的返回上一页
这时候,程序只能跟踪到url变成了/pageA, 在不知到用户操作情况下,无法判定究竟是要作出下列哪个行为

  1. 新建一个标签 内容为 /pageA (当用户行为是点击侧菜单栏)
  2. 将第二个标签内容替换为 /pageA (当用户行为是在操作2打开的标签栏内点击一个链接)
  3. 切换到第一个标签(当用的操作行为是点击第一个标签)
  4. 删除标签/pageB, 切换到标签/pageA (当用操作行为是点击游览器倒退,将程序状态切换到操作1完成之后的状态)

总结

正常点的web页面, 路由的入口仅仅是url, 而url本身没有上下文, 无状态, 所以不存在歧义,刷新,前进,后退不会造成问题。
但是标签模式没法仅仅从url上消除歧义,需要至少需要通过 用户操作+上下文, 而用户行为+上下文难以映射为url,所以不要指望用传统的路由来做标签模式的路由了。

自己写路由

下面是个简单的标签模式的实现,注意如果要用标签模式,就别指望用基于URL变化的传统路由了,乖乖自己写路由吧。

import PageA from "./PageA"
import PageA from "./PageA"
class App extends React.Component {
  state = { current: 0, pages: [] }
  uniqId = 0
  render(){
    return (
      <div>
        <aside>
           <div onClick={()=> this.create("Page A", PageA, { search: {id: "xxxxx"} })}>
               新建页面PageA
            </div>
           <div onClick={()=> this.create("Page B", PageB, { search: {id: "xxxxx"} })}>
              新建页面PageB
           </div>
        </aside>
        <nav>
            {this.pages.map((page, i)=> 
              <div onClick={()=> this.setState({current: i})}>
                {page.title}
               </div>
             )}
            </nav>
         {this.state.pages.map(({key, component, props}, index)=>(
             <div key={key} style={display: index === this.state.current ? "block": "none"}>
                <component {...props} 
                    createPage={this.createPage.bind(this)} 
                    changePage={this.replacePage.bind(this, index)}/>
             </div>
         ))}
      </div>
      )
  }
  createPage(title, component, props)  {
      this.setState({ pages: [
          ...this.state.pages, 
          { component, title, props, key: this.uniqId++ }], 
          current: this.state.pages.length,
       })
  }
  replacePage(index, title, component, props ){
      const pages = [...this.sate.pages];
      pages[index] = { key: this.uniqId++, component, title, props };
      this.setState({pages})
  }
}

牛逼一点的路由

用 redux, 或者 React.createContext 配合 高阶组件

#5

额,现在问题是pageA,pageB两个是同一个组件,只是路由不一样。为什么会这样呢,是因为需求要通过配置生成页面,也就是说通过参数不同,我在这个组件里渲染不同的dom。比如pageA这个页面有5个input,pageB页面有6个input。但实际上两个页面关联的组件都是同一个组件。

然后,我在页签下,同时打开这两个页面,由于用的是同一个组件,参数就被后打开的重置了。比如先打开pageA,再打开pageB,pageA的input也变成6个了。

#6

首先感谢回答,这么长一段。:innocent:

#7

加一个key,当切换标签的时候,让react强制重新生成组件

return (){
  return (
   <>
      <Nav></Nav>
      <Main  key={this.state.activePath} />
   </>
  )
}
#8

这个肯定不行的,不能刷新的。

不过问题已经解决了,是自己2了。两个页面渲染依赖的model是同一个,也就是说state是同一个,state变化就把所有页面都重现渲染了。现在对state拆一下,之前是state:[],现在是state:{key:state1,key:state2},每个页面都有一个唯一的key,也就有专属的state了。

仍然非常感谢您的搭理。祝您生活愉快。:innocent:

1 Like
#9

现在对state拆一下??什么意思啊,我也有需求啊

#10

我这边多路由的状态管理是自己用redux实现的,我之前的问题是多个路由对应了一个state,后来将多个路由的state分为多个,就解决了。至于状态管理如何用redux实现, 我这边没现成写好的答案,你可以百度下。

#11

谢谢,我这边用我的方法解决了,多页签的问题谢谢你

#12

谢谢你,我这边用我的方式,解决了。

#13

嗯嗯,解决就好