根据动作反应更新网址 [英] React update url base on action

问题描述

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

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

同时渲染2个组件.一个 select 组件(允许更改 appId)和一个主要组件(显示数据).

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

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

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

解决方案

所以你提到了

<块引用>

一个选择组件(允许更改 appId)和一个主组件(显示数据).

并说明您担心以下问题:

<块引用>

我的应用有很多组件，手动处理可以增加我的应用程序很复杂，所以这不是解决它的好方法.

所以也许你应该首先用 withRouter HOC 包装这个选择组件，因为它已经提到过，如果这个选择组件被使用多次.

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

props: { 匹配、位置、历史}

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

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

从'react'导入React；import { Link, withRouter } from 'react-router-dom'const SelectComponent = ({match: {params, url}}) =>(<div>dropDownItems.map(item =><链接key={item.id//或者简单的 item.appId}to={url.replace(`${params.appId}`, `item.appId`)>将应用程序更改为 {item.appId}</链接>

)导出默认 withRouter(SelectComponent)

由于params.appId 对应于'1'，我假设不会有任何参数等于appId 的值，url.替换(...)基本上会用 url 中的新值替换以前的 appId 的值.

因此，任何更改都应将您重定向到具有更新后的 appId

的新路由

如果你使用按钮，你也可以使用 <Link/> 来包装你的按钮，但你也可以使用 history.push 方法作为 onClick 事件来处理重定向.

I'm new to ReactJS. I have a problem with React Router v4 and need some advice from you guys. In my application (React + Redux), I'm configuring my route:

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

And render 2 components at the same time. A select component (allow change appId) and a main component (showing data).

Suppose that I'm in /app/1/detail with appId is 1 and showing a detail from application 1. When I press change application to 2, I want to change my url like /app/2/detail and change data to application 2 by the time. (means matching :appId to 2)

I know that I can dispatch an action with Redux then DetailComponent (or ConfigComponent/GiftsComponent) can catch it and change manual from inside component (every component) by using history.push or history.replace. 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.

Help me if having any solution. Thank you very much.

解决方案

So you mentioned that

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

And also state that you are worried about the following:

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.

So maybe you should go with wrapping this select component with withRouter HOC first as it is already mentioned, if this select component is used more than once.

Wrapping would allow you to access the following props =>

props: { match, location, history }

match object also contains params and url. Url stores the value of current path. In your case it basically is /app/1/detail. Params stores the parameters that the route has. In your case params would be the following params { appId: 1 } Having access to these props would allow you to implement and maintain routing logic inside of a single component.

So if you use a dropdown menu you can do the following

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)

Since params.appId corresponds to '1' and I assume that there won't be any parameter that equals to the value of appId, url.replace(...) would basically replace the value of former appId with the new value in the url.

So any change should redirect you to the new route with the updated appId

If you use buttons you can also use <Link /> to wrap your button I guess, but you could also use history.push method as an onClick event to handle the redirection.

这篇关于根据动作反应更新网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！