Question

我希望有人可以为我确认对嵌套路由的react-router的预期行为。我想拥有1）/route1之类的基本路由，然后拥有2）/route1/nested1和3）/route1/nested1/also之类的嵌套路由。这些嵌套的路线是否有可能在不重新呈现第一个路线的组件的情况下呈现子组件？如果成功完成，有人可以确认或显示一个小的代码示例，其中的嵌套路由不会导致父组件重新呈现吗？提前谢谢了。我相信这是不可能的，而且我惊讶的是，React-router将以这种方式设计，因为这不是React本身的工作方式。我曾经以为props.history的更新可能导致了重新渲染，但是如果是这样，无论是否将这些props明确地提供给组件，它都会这样做。

我在网上查看了官方文档以及许多评论和问题页面。有些人似乎说他们能够得到这种行为，而另一些人则说他们根本做不到。由于尚未将其视为错误，因此已在React-router 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

EXPECTED：react-router应该允许对嵌套路由进行添加和更改，而无需重新渲染父组件（嵌套路由应与组件树匹配，并且行为方式与React行为相同，即子级更改不会触发更高级别的更改。树）

实际：更改嵌套路由会导致父组件重新呈现

反应路由器嵌套的路由能否在不重新渲染父组件的情况下渲染组件？

0 个答案: