Question

我遵循官方案件：

但是我发现一个问题：当仅在发生路由动画时更改路由参数时，会重新渲染组件，但是在添加React Transition Group之前不会重新渲染组件。我不想更改路由参数，会发生路由动画。在这种情况下，我该怎么做才能阻止路由动画和重新渲染？

我的路线配置：

 <Router history={history}>
    <Route render={(params) => {
      const { location ,match} = params
      return (
        <div style={{ width: '100%', height: '100%' }}>
          <ScrollMemory/>
          <div id={'routeWrap'} style={{ width: '100%', height: '100%' }}>
            <TransitionGroup style={{ width: '100%', height: '100%' }}>
              <CSSTransition classNames={'router'} timeout={500} key={location.pathname}>
                <Switch location={location} key={location.key}>
                  <Route path='/test/:param?' component={Test}/>
                  <Route path='/tieba/:title' component={Tieba}/>
                  <Route path='/search' component={Search}/>
                  <Route path='/login' component={Login}/>
                  <Route path='/register' component={Register}/>
                  <Route path='/newPost/:tieba' component={NewPost}/>
                  <Route
                    path='/p/:threadId/:pageNo?/:isSeeLz?/:postId?'
                    component={Post}
                  />
                  <Route path='/t/p/:postId' component={FollowPost}/>
                  <Route path='/tc' component={TieCollection}/>
                  <Route path='/home/:userName' component={Home}/>
                  <Route path='/edituser' component={EditUser}/>
                  <Route path='/message' component={Message}/>
                  <Route path='/:info?' component={Index}/>
                </Switch>
              </CSSTransition>
            </TransitionGroup>
          </div>
        </div>
      )
    }}/>
  </Router>

history.push（）当我在'/ test'中调用history.push（'/ test / 1'）时，发生了路线动画：（

当仅更改路由参数时，对过渡组块路由动画进行反应

0 个答案: