Перемонтирование родительского компонента при переключении каналов реакции на маршрутизатор - PullRequest
0 голосов
/ 07 ноября 2019

У меня есть основной компонент макета, и обычно, когда я меняю маршрут, ссылки {this.props.child} должны быть изменены только.

enter image description here

Этомой компонент макета. index.js

<React.Fragment>
    {this.props.settings.dark_overlay ? <div className="dark"></div> : ''}
    <div className="site">
        <Header />
        <div className="sitecontent">
            <div className="container flex-or">
                <Content>
                    {this.props.children}
                </Content>
                {this.props.AsideType === "settings" ? null : <React.Fragment><AsideFirst /><AsideSecond /></React.Fragment>}
            </div>
        </div>
        <Footer />
    </div>
</React.Fragment>

Когда я создаю свое приложение asidefirst получает данные с сервера, выглядит так;

AsideFirst Component

constructor(props) {
    super(props);
    this.state = {
        trends: []
    }

    this.handleButons = this.handleButons.bind(this)
}

handleButons(e){
    let type = e.target.name
    if (type === "refresh") {
        this.getTrend()
    }
}

componentDidMount() {
    this.getTrend()
}

getTrend() {
    axios.post('/api/data/title/trend')
        .then(res => {
            const trends = res.data;
            console.log(trends)
            this.setState({ trends: trends });
        })
}

Здесь нет проблем ...

Но,

Когда я снова изменяю компонент маршрутизации, вот мое приложение .js *

<React.Fragment>
<ReactNotification />
<Router history={history}>
    <Switch>
      <Route path="/" exact component={Index} />
      <Route path="/kayit/" exact component={Register} />
      <Route path="/giris/" exact component={Login} />
      <Route path="/aktivasyon" exact component={Activation} />
      <Route path="/hesap/ayarlar" exact component={AccountSettings} />
      <Route path="/cikis" exact component={Logout} />
      <Route path="/:string/" exact component={ComplexPush} />
      <Route component={Page404} />
    </Switch>
</Router>
</React.Fragment>

Мой компонент макета (поэтому AsideFirst) получает данные с сервера при каждом изменении маршрута, хотя компоненты маршрута являются дочерними компонентами. Пример компонента маршрута;

Компонент ComplexPush

<Layout>
    <div className="complex-header">
        <Link to="/"><h4>{str}</h4></Link>
        {!id ? <NoEntry /> : "" }
    </div>
    <Entry />
    <Button variant="primary">Gönder</Button>
</Layout>

Итак, Asidefirst (внутри Layout) монтируется все время при изменении маршрута, хотя у меня все родительские компоненты Layout. Я не хочу этогоКак я могу решить это?

1 Ответ

1 голос
/ 07 ноября 2019

Предположим, у нас есть компонент Layout.

это будет маршрутизация с компонентом Layout:

<React.Fragment>
  <ReactNotification />
  <Router history={history}>
    <Layout>
      <Switch>
        <Route path="/" exact component={Index} />
        <Route path="/kayit/" exact component={Register} />
        <Route path="/giris/" exact component={Login} />
        <Route path="/aktivasyon" exact component={Activation} />
        <Route path="/hesap/ayarlar" exact component={AccountSettings} />
        <Route path="/cikis" exact component={Logout} />
        <Route path="/:string/" exact component={ComplexPush} />
        <Route component={Page404} />
      </Switch>
    </Layout>
  </Router>
</React.Fragment>

Где в Layout вы сохраняете состояние, которое хотите сохранить, вы рендерите эти маршруты как в рендеринг реквизитов , а также все такие вещи, как заголовок ... и т. д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...