Не удается перейти к другому компоненту

Question

у меня есть 2 компонента.Каждый из них на своем пути.

У меня есть компонент <Link> в первом компоненте, и когда я щелкаю по нему, второй компонент должен отображаться.URL после # меняется нормально, но в интерфейсе ничего не происходит.

Это основной компонент:

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

Проблема была решена!Мое реагирующее решение было частью гораздо большего и более старого решения.Это решение также имело некоторые ссылки на угловое, широкое решение.Я сделал эти ссылки, специфичные для представлений, которые нуждаются в них, а затем маршрутизация в реакции стала работать!

Извлеченный урок, проверьте, включен ли JavaScript.

Answer 2

При чтении кода, размещенного выше, все ваши компоненты расширяют 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, который не ожидает простых подпорок и заявляет также, что вы должны использовать Коммутатор вместо Фрагмента, чтобы обернуть ваши Маршруты, тогда он становится:

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

Надеюсь, это поможет вам.