Могут ли вложенные маршруты реакции-маршрутизатора отображать компонент без повторной визуализации родительского компонента? - PullRequest
1 голос
/ 01 июля 2019

Я надеюсь, что кто-то может подтвердить для меня ожидаемое поведение реакции-маршрутизатора для вложенных маршрутов.Я хотел бы иметь базовые маршруты, такие как 1) /route1, а затем вложенные маршруты, такие как 2) /route1/nested1 и 3) /route1/nested1/also.Могут ли эти вложенные маршруты отображать дочерние компоненты без повторной визуализации компонента первого маршрута?Может ли кто-нибудь подтвердить или, возможно, показать небольшой пример кода, в котором вложенные маршруты не вызывают повторного рендеринга родительского компонента, если вы сделали это успешно?Спасибо заранее.Я полагаю, что это невозможно, и я удивился тому, что реактивный маршрутизатор будет сконструирован таким образом, поскольку сам React работает не так.Я думал, что, возможно, обновления в props.history вызвали повторную визуализацию, но если это так, то это происходит независимо от того, были ли эти реквизиты явно переданы компоненту.

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

import React from 'react'
import { Link, Switch, Route, BrowserRouter as Router } from 'react-router-dom'

class Home extends React.Component {
  render() {
    return <div>Home</div>
  }
}

class Route1 extends React.Component {
  render() {
    console.log('Route1 RENDER')
    console.log('route1 props', this.props.history)
    return (
      <div>
        <div>Route1</div>
            <ul>
              <li>
                <Link to={'/route1/276364554643'}>nested route 1</Link>
              </li>
              <li>
                <Link to={'/route1/276364554643/also'}>also</Link>
              </li>
            </ul>
            <Route 
              exact 
              path={'/route1/:param_1'}
              render={() => <NestedRoute1 />}
            />
            <Route
              exact
              path='/route1/:param_1/also'
              render={() => <Also />}
            />
      </div>
    )
  }
}

class NestedRoute1 extends React.Component {
  render() {
    console.log('nested route history', this.props.history)
    return <div>Nested Route Component</div>
  }
}

class Also extends React.Component {
  render() {
    return <div>Also</div>
  }
}

class Two extends React.Component {
  render() {
    return <div>Two</div>
  }
}

class Three extends React.Component {
  render() {
    return <div>Three</div>
  }
}

class App extends React.Component {
  render() {
    console.log('APP RENDER')
    return (
      <div className='App'>
        <Router>
          <div>
            <ul>
              <li>
                <Link to='/'>home</Link>
              </li>
              <li>
                <Link to='/route1'>route1</Link>
              </li>
              <li>
                <Link to='/two'>two</Link>
              </li>
              <li>
                <Link to='/any-other'>other</Link>
              </li>
            </ul>
            <Switch>
              <Route exact path='/' component={Home} />
              <Route 
                path='/route1' 
                render={() => <Route1 />}
              />
              <Route path='/two' component={Two} />
              <Route path='/:other' component={Three} />
            </Switch>
          </div>
        </Router>
      </div>
    )
  }
}

export default App

ОЖИДАЕТСЯ: реагирующий маршрутизатор должен разрешать добавления и изменения во вложенные маршруты без повторного рендеринга родительских компонентов (вложенные маршруты должны соответствовать дереву компонентов и вести себя так же, как реагирует поведение, когда происходят изменения в дочерних компонентах).не запускать изменения выше в дереве)

ACTUAL: изменения во вложенных маршрутах вызывают повторный рендеринг родительского компонента

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