React，Redux，React-Router是什么？

Question

应用程序架构问题。 假设页面上有很多组件(看图片) (主要的)。 更好的方法是使用什么来切换主要子组件(激活/未激活)? 以及页面(1、2、3、下一页)? 我可以同时使用React-Router完成这两个任务吗? P.S.：我使用ReactJS进行渲染。

- evgkch

---

取决于：每个子组件在激活时是否应具有唯一的URL？如果是，则React Router可以轻松实现您想要的功能。如果不是，则最好在父组件中使用状态来决定渲染哪个子组件。 - Matthew Herbst

有趣的是，我以为你在变化拉丁动词。/OT - Patrick Trentin

Answer 1

我不会在结果过滤中使用react-router。由于您正在使用Redux，您可以将reducer分为主要部分，并将每个部分的活动/非活动状态以及当前页状态都保存在一个store中。

- Eric Kambestad

Answer 2

如果您想要一个稳定且可扩展的应用程序架构，我建议使用一个起始套件。

一个好的起始套件的维基将描述所选择的设计原则。

我最喜欢与无头后端结合使用的起始套件之一是React Redux starter kit。

- d1gits

Answer 3

关键在于使用情况。如果您有以下用例：

1. 用户复制粘贴筛选结果和页面链接并与他人分享
2. 用户可以将筛选结果页面添加到书签中，并稍后返回它。

那么我肯定会建议使用React Router。

您可以像这样设置路由：

<Route path="main/:status/:page" component={Main}/>

然后params对象将作为props注入到您的Main组件中。

如果用户单击按钮，则应使用react-router的push更改路由或简单地使用react router的Link（而不是使用redux的dispatch操作或使用this.setState（如果存储为本地状态））。

我认为这并不比使用redux或本地状态存储更困难，而且具有以上更多用例的额外优势。

- Derrick

Answer 4

所以你想在Redux应用程序中进行路由。您可以使用react-router-dom。 react-redux将是您数据的真相来源，而react-router-dom将是您URL的真相来源。

使用react-redux（创建操作、减速器等）处理状态管理的数据，并使用react-router-dom进行导航。

React Router的使用

- Mselmi Ali

Answer 5

我认为你在这个页面不应该使用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
   }
}

- ryouaki