Question

我是ReactJS的新手。我有React Router v4的问题，需要你们的一些建议。在我的应用程序（React + Redux）中，我正在配置我的路线：

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

同时渲染2个组件。选择组件（允许更改 appId ）和主要组件（显示数据）。

假设我在 / app / 1 / detail ，appId为1，并显示应用程序1中的详细信息。当我将更改应用程序按到2时，我想更改我的网址，如< em> / app / 2 / detail 并按时将数据更改为应用程序2。（表示匹配：appId to 2）

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

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

Answer 1

所以你提到了

选择组件（允许更改appId）和主要组件（显示数据）。

并声明您担心以下情况：

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

所以，如果这个选择组件被多次使用，那么你可能应该首先用withRouter HOC来包装这个选择组件，如果已经提到的话。

包装将允许您访问以下props =＆gt;

props: { match, location, history }

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

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

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对应于＆＃39; 1＆＃39;我认为不会有任何参数等于appId，url.replace(...)的值基本上会用url中的新值替换前appId的值。

因此，任何更改都应使用更新后的appId

将您重定向到新路线

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

Answer 2

虽然您的问题不明确，但似乎您希望使用react-router以编程方式更改当前网址。

为此，您需要来自react-router的withRouter HOC。有了它，你可以做这样的事情：

import React from 'react';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router';

const ExampleComponent = (props) => {

  const goToNextId = () => {
    props.history.push(`/app/${props.match.params.appId + 1}/detail`);
  };

  return (
    <div>
      <button onClick={goToNextId}>Next Id</button>
    </div>
  );
};

ExampleComponent.propTypes = {
  history: PropTypes.object.isRequired,
  match: PropTypes.object.isRequired,
};

export default withRouter(ExampleComponent);

根据操作

2 个答案: