小编unl*_*.it的帖子

React router Link不会导致组件在嵌套路由中更新

这真让我抓狂.当我尝试在嵌套路由中使用React Router的链接时,链接会在浏览器中更新,但视图不会更改.然而,如果我将页面刷新到链接,它确实如此.不知何故,组件不应该更新(或者至少是目标).

这是我的链接的样子(上一个/下一个项目真的是变量):

<Link to={'/portfolio/previous-item'}>
    <button className="button button-xs">Previous</button>
</Link>
<Link to={'/portfolio/next-item'}>
    <button className="button button-xs">Next</button>
</Link>
Run Code Online (Sandbox Code Playgroud)

一个hacky解决方案是manaully调用forceUpate(),如:

<Link onClick={this.forceUpdate} to={'/portfolio/next-item'}>
    <button className="button button-xs">Next</button>
</Link>
Run Code Online (Sandbox Code Playgroud)

这工作,但导致整页刷新,我不想要和错误:

ReactComponent.js:85 Uncaught TypeError: Cannot read property 'enqueueForceUpdate' of undefined
Run Code Online (Sandbox Code Playgroud)

我已经搜索了高低的答案,我最接近的是:https://github.com/reactjs/react-router/issues/880.但它已经过时了,我没有使用纯渲染混合.

以下是我的相关路线:

<Route component={App}>
    <Route path='/' component={Home}>
        <Route path="/index:hashRoute" component={Home} />
    </Route>
    <Route path="/portfolio" component={PortfolioDetail} >
        <Route path="/portfolio/:slug" component={PortfolioItemDetail} />
    </Route>
    <Route path="*" component={NoMatch} />
</Route>
Run Code Online (Sandbox Code Playgroud)

无论出于何种原因,调用Link不会导致组件重新安装哪些需要发生以获取新视图的内容.它确实调用componentDidUpdate,我确信我可以检查url slug更改然后在那里触发我的ajax调用/视图更新,但似乎不应该这样做.

编辑(更多相关代码):

PortfolioDetail.js

import React, {Component} from 'react';
import { browserHistory } from 'react-router'
import {connect} …
Run Code Online (Sandbox Code Playgroud)

reactjs react-router

12
推荐指数
1
解决办法
5991
查看次数

标签 统计

react-router ×1

reactjs ×1