React Router 仅在第二次单击后更新

Question

所以，基本上我有多个嵌套路由，例如/:platform/:account/products/:tab/:productId/summary。 一切正常到我实际的单个产品组件，但 react-router 在我的单个产品选项卡中停止正常工作。 我有一个带有标签（路线）的产品视图，当单击一个项目时，会弹出一个弹出窗口，它是单个产品视图，里面还有 3 个标签。

我的产品的子路由正在更新，但仅在下一个渲染周期。

1. 我在总结中，然后单击价格：没有任何反应 （路由更改为/:platform/:account/products/:tab/:productId/prices）
2. 我单击摘要：已渲染组件更改为价格 （路由更改为/:platform/:account/products/:tab/:productId/summary）
3. 我单击翻译：渲染组件更改为摘要 （路由更改为/:platform/:account/products/:tab/:productId/translations）
4. 我再次单击翻译：渲染组件更改为翻译 （完全没有改变路线）

我已经为此奋斗了 4 个多小时，我检查了我的树中是否有任何 PureComponent，我几乎在所有地方都使用了 withRouter，我还检查了我的产品组件是否没有更新（也许我的主视图组件阻止了更新），但一切似乎都很好，新道具是正确的。 我也尝试在connect() 中使用{ pure: false }，但没有任何帮助。 为了以防万一，我还删除了这个localize HOC，但这并没有解决它。

版本

4.2.0

示例代码

这是一个从我的组件中剥离出来的渲染方法：

class ProductView extends Component {
  componentWillReceiveProps() {
    console.log("UPDATED PRODUCT TAB")
  }

  render() {
    const { match, history, translate, lang, loading, data } = this.props
    console.log(match)
    return (
      <Modal>
          <TabList>
        <TabItem>
          <NavLink
            activeClassName="active"
            to={{
              pathname: `/${match.params.platform}/${match.params.account}/products/${match.params.tab}/${match.params.productId}/summary`,
              search: location.search,
            }}
          >
            {translate("Summary")}
          </NavLink>
        </TabItem>
        <TabItem>
          <NavLink
            activeClassName="active"
            to={{
              pathname: `/${match.params.platform}/${match.params.account}/products/${match.params.tab}/${match.params.productId}/prices`,
              search: location.search,
            }}
          >
            {translate("Prices")}
          </NavLink>
        </TabItem>
        <TabItem>
          <NavLink
            activeClassName="active"
            to={{
              pathname: `/${match.params.platform}/${match.params.account}/products/${match.params.tab}/${match.params.productId}/translations`,
              search: location.search,
            }}
          >
            {translate("Translations")}
          </NavLink>
        </TabItem>
      </TabList>
          <Switch>
            <Route path="/:platform/:account/products/:tab/:id/summary" component={Summary} />
            <Route path="/:platform/:account/products/:tab/:id/prices" component={Prices} />
            <Route path="/:platform/:account/products/:tab/:id/translations" component={Translations} />
          </Switch>
      </Modal>
    )
  }
}

const mapStateToProps = state => (...)

const mapDispatchToProps = dispatch => (...)

export default withRouter(connect(
  mapStateToProps,
  mapDispatchToProps,
)(localize("translate")(ProductView)))

到达产品组件的路径如下所示： <Route exact path="/:platform/:account/products/:tab/:productId/:productTab" component={ProductView} /> 添加或删除:productTab 没有区别。 在具有此产品路线的组件内，我还有其他 NavLinks 选项卡和路由器工作正常。

这里的奇怪之处在于，组件一直更新到我的产品路线，并使用正确的match 道具，但那些子路线，包括 NavLinks 仅在再次单击后更新。

Answer 1

如果您使用嵌套的Route 或NavLink（Route 的包装器），则需要使用Switch（为方便起见）来包装所有模态内容（或至少使用 Route/ 的部分）导航链接）。

const location = (this. - if you component is not a function)props.location;
<Switch location={location}>
  <NavLink ... />
  <Route ... />
</Switch>

这将确保更新位置。

react-modal 不会干扰用户组件的更新。 Routes 接收到的location 来自getChildContext()，它只在 react 组件生命周期后更新。通过在render() 上切换位置，上下文将是新的，并将提供给子路由。它将按预期工作。

Answer 2

React-redux 在其connect 函数中实现了纯渲染。所以这可能会阻止您的更新

像这样尽早尝试使用withRouter。它将阻止connect 阻止来自路由器的更新。

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(localize("translate")(withRouter(ProductView)))

Answer 3

所以，我设法找到了它（不知道为什么我没有在 3 小时前尝试这个......）并发现它是由于 react-modal 造成的。

还有其他人有同样的问题，这是票： https://github.com/reactjs/react-modal/issues/499