我正在尝试将 Backbone.Marionette 应用程序替换为 React，并且在考虑查询参数时遇到了困难。我想我在理解这种模式时错过了一个非常简单的和平，所以如果这个问题完全是无稽之谈，我深表歉意。我将不胜感激任何支持或只是指出我可以更具体地谷歌的一些方向。
有一个 /users列出用户的页面，您可以通过搜索栏过滤用户。因此，如果您想过滤用户名中包含 'joe' 的用户，我将使用查询参数(如 /users?username=joe)向服务器发出请求。 .此外，我可以通过添加 page 进行分页参数( /users?username=joe&page=1 )。
如果我只考虑功能，流程可能是
joe到输入元素并单击 搜索 . Action (如 Action.getUser)。 Action向服务器发出请求并接收结果 Dispatcher将带有结果负载的函数分派(dispatch)给对 Store 感兴趣的任何人(通常是 Action ) . Store的状态随着 Action 收到的新结果而变化Component ) 通过聆听 Store 重新渲染的变化。 它按预期工作。但是，我希望客户端能够为当前过滤的结果添加书签，并能够在一段时间后返回到同一页面。这意味着我需要在某个地方保存有关客户所做的搜索词的明确信息，这通常是 url(我说得对吗？)。因此，我需要使用查询参数更新 url 以保存搜索词 (
/users?username=joe&page=1 )。我感到困惑的是何时何地更新网址？我现在能想到的是下面的两个选项——它们似乎一点也不干净。
选项1
joe到输入元素并单击 搜索 . /users?username=joe&page=1 )触发 ReactRouter 的转换。 Component ) 通过 this.props.params 接收新参数和 this.props.query . Component ) 触发 Action喜欢 Action.getUser取决于它收到的查询参数 - 在这种情况下 username=joe&page=1 . 在这之后，它和上面一样
选项2(只有6个与我上面解释的不同)
joe到输入元素并单击 搜索 . Action (如 Action.getUser)。 Action向服务器发出请求并接收结果 Dispatcher将带有结果负载的函数分派(dispatch)给对 Store 感兴趣的任何人(通常是 Action ) . Store的状态随着 Action 收到的新结果而变化Component ) 通过聆听 Store 重新渲染的变化。 不知何故(我还不知道如何)根据它的 props 更新它的 url (如 this.props.searchusername 和 this.props.searchpage ) 处理查询参数的最佳实践是什么？ (或者这可能不是特定于查询参数)
我是否完全误解了设计模式或架构？在此先感谢您的任何支持。
我读过的一些文章
最佳答案
不完全确定你的意思
this means I will need to update the url to save the information (/users?username=joe&page=1).
您可能会拥有与此类似的结构。
顶部容器.jsx
-- 用户.jsx
-- User.jsx 的列表
通常 TopContainer 会监视所有存储，如果有任何更改，则将其传递给 users.jsx。这样在 Users.jsx 中，您可以简单地渲染 this.props.users 而不必担心任何重新渲染。
搜索用户操作通常发生在 TopContainer 的 componentWillMount 事件中，您的页面将监听 UserStore。这是抛出任何查询参数的好地方。像这样的东西会起作用
componentWillUnmount() {
let searchTerm = router.getCurrentQuery().searchTerm;
UserActions.searchUsers(searchTerm)
},
该页面并不真正关心 url 是否有查询参数，它只是愚蠢地显示用户存储中的任何内容。
然后当搜索完成时，Users.jsx 将被重新加载并显示正确的结果
关于reactjs - 如何处理 react + react 路由器+通量中的查询参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32208655/