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