Question

我有2个组成部分。他们每个人都走自己的路。

我在第一个组件中有一个<Link>组件，当我单击该组件时，应该渲染第二个组件。＃之后的url可以正常更改，但是ui中什么也没有发生。

这是主要组成部分：

export default class IntegrationApp extends React.PureComponent {
    render() {
        return (
            <>
                <Route path="/details/:encryptedId/:integrationType/" component={DetailsOverview} />
                <Route exact path="/:integrationSource?/" component={IntegrationsOverview} />
            </>
        );
    }
}

ReactDOM.render(
    <HashRouter>
        <IntegrationApp />
    </HashRouter>
    , document.getElementById('integrationsOverviewContainer'));

<Link>是一个自定义组件。

它看起来像这样：

export default class LinkForRouting extends React.PureComponent {
    render() {
        let cssClass = this.props.isButton ? ' btn ' : '';
        cssClass += this.props.isPrimary ? ' btn-primary ' : '';
        cssClass += this.props.customCssClass ? this.props.customCssClass : '';

        const clickEvent = this.props.handleClick ? () => this.props.handleClick() : ()=> function () { return null };

        return (
            <Link to={this.props.path} replace={true} className={cssClass} onClick={clickEvent}>
                {this.props.children}
            </Link>
        );
    }
}

<Link>组件在<IntegrationsOverview>组件内部使用，如下所示：

 <LinkForRouting path={`/details/${integration.encryptedId}/${integration.integrationType}`} isButton={false} isPrimary={false} > Vis </LinkForRouting>

如果我单击链接，然后再点击F5，则<DetailsOverview>组件可以正常显示，但是如果我单击链接，则URL只会更改，并且什么也没有发生。关于如何触发<DetailsOverview>组件，单击<Link>组件时如何触发的任何想法？

Answer 1

通过阅读发布在所有组件上方的代码，它们正在扩展PureComponent。

如React docs所说：

React.PureComponent的shouldComponentUpdate（）仅浅浅地比较对象。如果这些数据包含复杂的数据结构，则可能会产生假阴性，从而产生更大的差异。 仅当您期望拥有简单的道具和状态时才扩展PureComponent ，或者当您知道深度数据结构已更改时使用forceUpdate（）。或者，考虑使用不可变的对象来促进嵌套数据的快速比较。此外，React.PureComponent的shouldComponentUpdate（）会跳过整个组件子树的属性更新。确保所有子组件也都是“纯”的。

您的情况：

export default class IntegrationApp extends React.PureComponent {
    render() {
        return (
            <>
                <Route path="/details/:encryptedId/:integrationType/" component={DetailsOverview} />
                <Route exact path="/:integrationSource?/" component={IntegrationsOverview} />
            </>
        );
    }
}

IntegrationApp组件不需要简单的道具和状态，您还应该使用Switch而不是Fragment来包装您的路线，然后它变成：

import React from "react";
import {
  Switch,
  Route
} from "react-router-dom";

export default class IntegrationApp extends React.Component {
  render() {
    return ( <
      Switch >
      <
      Route path = "/details/:encryptedId/:integrationType/"
      component = {
        DetailsOverview
      }
      /> <
      Route exact path = "/:integrationSource?/"
      component = {
        IntegrationsOverview
      }
      /> <
      /Switch>
    );
  }
}

我在https://codesandbox.io/s/5vk79jlrn4

上写了一个简单的例子

希望它可以为您提供帮助。

Answer 2

问题已解决！我的React解决方案是一个更大，更旧的解决方案的一部分。该解决方案还涉及角度的解决方案。我针对那些需要它们的视图进行了引用，然后在React中进行路由工作！

经验教训，请检查随附的javascript。

无法导航到其他组件

2 个答案: