React router Link not causing component to update within nested routes
<p>This is driving me crazy. When I try to use React Router's Link within a nested route, the link updates in the browser but the view isn't changing. Yet if I refresh the page to the link, it does. Somehow, the component isn't updating when it should (or at least that's the goal).</p>

<p>Here's what my links look like (prev/next-item are really vars):</p>

<pre><code>&lt;Link to={'/portfolio/previous-item'}&gt;
    &lt;button className="button button-xs"&gt;Previous&lt;/button&gt;
&lt;/Link&gt;
&lt;Link to={'/portfolio/next-item'}&gt;
    &lt;button className="button button-xs"&gt;Next&lt;/button&gt;
&lt;/Link&gt;
</code></pre>

<p>A hacky solution is to manaully call a forceUpate() like:</p>

<pre><code>&lt;Link onClick={this.forceUpdate} to={'/portfolio/next-item'}&gt;
    &lt;button className="button button-xs"&gt;Next&lt;/button&gt;
&lt;/Link&gt;
</code></pre>

<p>That works, but causes a full page refresh, which I don't want and an error:</p>

<pre><code>ReactComponent.js:85 Uncaught TypeError: Cannot read property 'enqueueForceUpdate' of undefined
</code></pre>

<p>I've searched high and low for an answer and the closest I could come is this: <a href="https://github.com/reactjs/react-router/issues/880" rel="noreferrer">https://github.com/reactjs/react-router/issues/880</a>. But it's old and I'm not using the pure render mixin.</p>

<p>Here are my relevant routes:</p>

<pre><code>&lt;Route component={App}&gt;
    &lt;Route path='/' component={Home}&gt;
        &lt;Route path="/index:hashRoute" component={Home} /&gt;
    &lt;/Route&gt;
    &lt;Route path="/portfolio" component={PortfolioDetail} &gt;
        &lt;Route path="/portfolio/:slug" component={PortfolioItemDetail} /&gt;
    &lt;/Route&gt;
    &lt;Route path="*" component={NoMatch} /&gt;
&lt;/Route&gt;
</code></pre>

<p>For whatever reason, calling Link is not causing the component to remount which needs to happen in order to fetch the content for the new view. It does call componentDidUpdate, and I'm sure I could check for a url slug change and then trigger my ajax call/view update there, but it seems like this shouldn't be needed.</p>

<p>EDIT (more of the relevant code):</p>

<p>PortfolioDetail.js</p>

<pre><code>import React, {Component} from 'react';
import { browserHistory } from 'react-router'
import {connect} from 'react-redux';
import Loader from '../components/common/loader';
import PortfolioItemDetail from '../components/portfolio-detail/portfolioItemDetail';
import * as portfolioActions  from '../actions/portfolio';

export default class PortfolioDetail extends Component {

    static readyOnActions(dispatch, params) {
        // this action fires when rendering on the server then again with each componentDidMount. 
        // but not firing with Link...
        return Promise.all([
            dispatch(portfolioActions.fetchPortfolioDetailIfNeeded(params.slug))
        ]);
    }

    componentDidMount() {
        // react-router Link is not causing this event to fire
        const {dispatch, params} = this.props;
        PortfolioDetail.readyOnActions(dispatch, params);
    }

    componentWillUnmount() {
        // react-router Link is not causing this event to fire
        this.props.dispatch(portfolioActions.resetPortfolioDetail());
    }

    renderPortfolioItemDetail(browserHistory) {
        const {DetailReadyState, item} = this.props.portfolio;
        if (DetailReadyState === 'WORK_DETAIL_FETCHING') {
            return &lt;Loader /&gt;;
        } else if (DetailReadyState === 'WORK_DETAIL_FETCHED') {
            return &lt;PortfolioItemDetail /&gt;; // used to have this as this.props.children when the route was nested
        } else if (DetailReadyState === 'WORK_DETAIL_FETCH_FAILED') {
            browserHistory.push('/not-found');
        }
    }

    render() {
        return (
            &lt;div id="interior-page"&gt;
                {this.renderPortfolioItemDetail(browserHistory)}
            &lt;/div&gt;
        );
    }
}

function mapStateToProps(state) {
    return {
        portfolio: state.portfolio
    };
}
function mapDispatchToProps(dispatch) {
    return {
        dispatch: dispatch
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(PortfolioDetail);
</code></pre>

<p>PortfolioItemDetail.js</p>

<pre><code>import React, {Component} from 'react';
import {connect} from 'react-redux';
import Gallery from './gallery';

export default class PortfolioItemDetail extends React.Component {

    makeGallery(gallery) {
        if (gallery) {
            return gallery
                .split('|')
                .map((image, i) =&gt; {
                    return &lt;li key={i}&gt;&lt;img src={'/images/portfolio/' + image} alt="" /&gt;&lt;/li&gt;
            })
        }
    }

    render() {
        const { item } = this.props.portfolio;

        return (
            &lt;div className="portfolio-detail container-fluid"&gt;
                &lt;Gallery
                    makeGallery={this.makeGallery.bind(this)}
                    item={item}
                /&gt;
            &lt;/div&gt;
        );
    }
}

function mapStateToProps(state) {
    return {
        portfolio: state.portfolio
    };
}

export default connect(mapStateToProps)(PortfolioItemDetail);
</code></pre>

<p>gallery.js</p>

<pre><code>import React, { Component } from 'react';
import { Link } from 'react-router';

const Gallery = (props) =&gt; {

    const {gallery, prev, next} = props.item;
    const prevButton = prev ? &lt;Link to={'/portfolio/' + prev}&gt;&lt;button className="button button-xs"&gt;Previous&lt;/button&gt;&lt;/Link&gt; : '';
    const nextButton = next ? &lt;Link to={'/portfolio/' + next}&gt;&lt;button className="button button-xs"&gt;Next&lt;/button&gt;&lt;/Link&gt; : '';

    return (
        &lt;div&gt;
            &lt;ul className="gallery"&gt;
                {props.makeGallery(gallery)}
            &lt;/ul&gt;
            &lt;div className="next-prev-btns"&gt;
                {prevButton}
                {nextButton}
            &lt;/div&gt;
        &lt;/div&gt;
    );
};

export default Gallery;
</code></pre>

<p>New routes, based on Anoop's suggestion:</p>

<pre><code>&lt;Route component={App}&gt;
    &lt;Route path='/' component={Home}&gt;
        &lt;Route path="/index:hashRoute" component={Home} /&gt;
    &lt;/Route&gt;
    &lt;Route path="/portfolio/:slug" component={PortfolioDetail} /&gt;
    &lt;Route path="*" component={NoMatch} /&gt;
&lt;/Route&gt;
</code></pre>