react-keeper icon indicating copy to clipboard operation
react-keeper copied to clipboard

嵌套路由的处理

Open qfgyd2004 opened this issue 7 years ago • 9 comments

我的框架页面路由是/ ,登录路由是/login 和框架路由平级 框架页面路由下有很多子路由 /list,/list2

现在问题是,如果框架路由写成/> 则直接访问/list 不能展示框架页面,只展示了/list对应的页面 如果框架路由写成/ 则登录页面匹配到的页面为框架页面,

请问这种情况要如何处理?

qfgyd2004 avatar Jan 11 '18 09:01 qfgyd2004

这个是动态路由原理上天生的缺陷,因为无法判定子路由层级深度,所有无法判定当前路由是否匹配结束,所以下面的方式是不支持的:

<Route path='/' component={Home}>
  <Route path='/list' component={List}/>
  <Route path='/list2' component={List2}/>
</Route>
<Route path='/login' component={Login}/>

因为Home不知道子组件的深度,所以这种写法,/login的情况,Home按规则是要匹配的(没有>符的情况)。 可以修改页面的结构,下面是推荐的方式(将Home组件包含于List和List2):

<Route path='/list' component={List}/>
<Route path='/list2' component={List2}/>
<Route path='/login' component={Login}/>

lanistor avatar Jan 19 '18 13:01 lanistor

但是 react-router,vue-router都是支持这种写法的,完全没有问题 ,他们是如何判断的?@vifird

qfgyd2004 avatar Jan 25 '18 05:01 qfgyd2004

react-router和vue-router虽然支持嵌套路由,但是无法支持动态可扩展路由,他们的所有子路由是完全需要提前配置好的,而Keeper可以在任意组件里随时添加子路由,不需要提前配置,这是考虑到大型web系统模块化的方式采用的方案。但为此也牺牲了子路由可预测性,子路由不可预测,便会有上面的问题,因为在路由匹配过程中,直到匹配到最后最深层的一个组件,才知道路由是否匹配,而这个时候,组件都已经经过了render过程。

lanistor avatar Jan 28 '18 15:01 lanistor

能否开发两个版本,或者开放一个配置,是否需要支持动态可扩展路由,大多数系统应该路由都是提前配置好的,目前这种对于管理系统并不适合,公共的头尾应该采用母版的方式,而不应该使用include,目前的这种方案,母版是无法使用的,只能每个页面引入公共的组件,这样非常麻烦。 @vifird

qfgyd2004 avatar Jan 29 '18 03:01 qfgyd2004

Good one: next version 3

lanistor avatar Mar 04 '18 08:03 lanistor

@vifird 怎样获取 路径中的参数(如: /list?code=2018 ),Control 只能获取到 "/list",后面的参数在 param 没有获取到

wuqianrui avatar Mar 07 '18 09:03 wuqianrui

@SlientWhale 浏览器原生API:location.search

lanistor avatar Mar 07 '18 14:03 lanistor

我想在问一下,如果我在A页面用CacheLine访问B页面,B页面选完数据要返回给A页面,但是返回A页面的时候没有回调生命周期,那请问我怎么才能够将B页面选择的数据传给A页面?

wuqianrui avatar Mar 08 '18 08:03 wuqianrui

我想在问一下,如果我在A页面用CacheLine访问B页面,B页面选完数据要返回给A页面,但是返回A页面的时候没有回调生命周期,那请问我怎么才能够将B页面选择的数据传给A页面?

eventEmitter或者或者全局数据缓存或者状态管理呀~根据你的实际场景来决定采取哪种方案。

AmyShieh avatar Oct 14 '20 08:10 AmyShieh