reactjs - 根据 Action react 更新网址

Question

我是 ReactJS 的新手。我对 React Router v4 有问题，需要你们的一些建议。
在我的应用程序(React + Redux)中，我正在配置我的路由:

/app/:appId/detail
/app/:appId/config/:store
/app/:appId/gifts

并同时渲染 2 个组件。 A 选择 组件(允许更改 appId)和一个主要组件(显示数据)。

假设我在/app/1/detail 中，appId 为 1 并显示应用程序 1 中的详细信息。当我按更改应用程序到 2 时，我想更改我的 url，如/app/2/detail 并将数据更改为应用程序2 到时候。 (意味着匹配 :appId 到 2)

我知道我可以用 Redux 调度一个 Action 然后 详细组件 (或 ConfigComponent / GiftsComponent )可以通过使用 捕获它并从内部组件(每个组件)更改手册history.push 或 history.replace .我的应用程序有很多组件，手动处理会增加我的应用程序的复杂性，因此这不是解决它的好方法。

如果有任何解决方案，请帮助我。非常感谢。

Answer 1

所以你提到

A select component (allow change appId) and a main component (showing data).

并说明您担心以下问题:

My application have a lot of components, manual handling can increase complexity in my app, so it is not a good way to resolve it.

所以也许你应该用 withRouter 包装这个选择组件如果多次使用此选择组件，则首先提到 HOC。

包装将允许您访问以下 Prop =>

props: { match, location, history }

match对象还包含 params和 url . Url 存储当前路径的值。在你的情况下，它基本上是 /app/1/detail . Params 存储路由具有的参数。在您的情况下，参数将是以下 params { appId: 1 }访问这些 props 将允许您在单个组件内实现和维护路由逻辑。

因此，如果您使用下拉菜单，则可以执行以下操作

import React from 'react';
import { Link, withRouter } from 'react-router-dom'

const SelectComponent = ({match: {params, url}}) => (
  <div>
    dropDownItems.map(item => 
       <Link 
        key={item.id // or simply item.appId}
        to={url.replace(`${params.appId}`, `item.appId`)
       >
        Change application to {item.appId}
      </Link>
    </div>
)

export default withRouter(SelectComponent)

自 params.appId对应于“1”，我假设不会有任何参数等于 appId 的值, url.replace(...)基本上会取代以前 appId 的值在 url 中使用新值。

因此，任何更改都应将您重定向到更新后的新路由 appId
如果您使用按钮，您也可以使用 <Link />我猜想包裹你的按钮，但你也可以使用 history.push方法作为 onClick处理重定向的事件。