应用程序架构问题。 假设页面上有很多组件(看图片) (主要的)。 更好的方法是使用什么来切换主要子组件(激活/未激活)? 以及页面(1、2、3、下一页)? 我可以同时使用React-Router完成这两个任务吗? P.S.:我使用ReactJS进行渲染。
应用程序架构问题。 假设页面上有很多组件(看图片) (主要的)。 更好的方法是使用什么来切换主要子组件(激活/未激活)? 以及页面(1、2、3、下一页)? 我可以同时使用React-Router完成这两个任务吗? P.S.:我使用ReactJS进行渲染。
关键在于使用情况。如果您有以下用例:
那么我肯定会建议使用React Router。
您可以像这样设置路由:
<Route path="main/:status/:page" component={Main}/>
然后params对象将作为props注入到您的Main组件中。
如果用户单击按钮,则应使用react-router的push更改路由或简单地使用react router的Link(而不是使用redux的dispatch操作或使用this.setState(如果存储为本地状态))。
我认为这并不比使用redux或本地状态存储更困难,而且具有以上更多用例的额外优势。
所以你想在Redux应用程序中进行路由。您可以使用react-router-dom
。 react-redux
将是您数据的真相来源,而react-router-dom
将是您URL的真相来源。
使用react-redux
(创建操作、减速器等)处理状态管理
的数据,并使用react-router-dom
进行导航。
我认为你在这个页面不应该使用react-router。
你应该通过reducer来控制状态(活动/非活动,1、2、3、下一个),就像下面这样:
case NEXT_PAGE:
return {...state, list:[{active:0, ...others},{active:1, ...others},...], page: 1};
你可以从props中获取想要在此页面上显示的数据。
mapStateToProps(state) {
return {
list: state.xxx.list,
currentPage: state.xxx.page
totalPage: state.xxx.total
}
}