React.js：使用react-router.link重新渲染组件

Question

我正在使用react-router的链接来动态呈现我的页面。我将一个嫌疑人列表传递给它，并根据naturalPersonId参数，它应该读取列表并填充页面上的相应详细信息。我的问题是每个链接组件我正​​在使用（Link to =“NaturalPerson”.... 但是基于传递的id，我需要渲染组件以便传递正确的细节，但是一旦我点击一个链接就会渲染组件，但之后我点击另一个链接，组件不会被重新渲染。每次按下不同的链接时，有没有办法重新渲染相同的组件。

使用链接的组件：

module.exports = React.createClass({
    displayName: 'nav',

    render: function render() {
        var activeClass = 'left-nav-selected';
        var optionList = this.props.optionList;
        return (
            <section className='left-nav' id='left-nav'>
                <div className='left-nav-title'></div>
                <nav className='left-nav-links'>
                    <ul>
                        {this.props.suspects.map(function(result,i) {
                                var navClass = 'nav-section'+i;
                                var suspectName=result.identity.first_name +"  "+ result.identity.last_name;
                                var entityNumber = result.entity_number;
                                return (
                                    <li key={i} className='left-nav-link' id={navClass}>
                                        <Link 
                                            to="NaturalPerson" 
                                            params={{naturalPersonId:entityNumber}}
                                            activeClassName={activeClass}
                                        >{suspectName}</Link>
                                    </li>

                                );
                        })}
                    </ul>
                </nav>
            </section>
        );
    }
});

NaturalPerson.jsx：

module.exports = React.createClass({
    getInitialState: function () {
        return {
            readOnly: true
        };
    },

    submit: function () {
        this.setState({readOnly: false});
        console.log(this.props.firstName);
    },

    save: function () {
        this.transitionTo('/');
    },

    componentDidMount: function () {
        console.log("naturalperson mounted");
    },

    render: function render() {
        var entityNumber = this.props.params.naturalPersonId;
        var suspects = this.props.suspects;
        var populatedSuspect;
        for (var i = 0; i < suspects.length; i++) {
            if (suspects[i].entity_number === entityNumber) {
                populatedSuspect = suspects[i];
                break;
            }
        }

        console.log("########" + populatedSuspect.identity.first_name);

        return (
            <form action="/Output" method="POST">
                <div id="container_suspects">
                    <input type="submit" value="Save"/>
                    <button type="button" onClick={this.submit}>Edit Details</button>
                    <div id="suspects_personal_details">
                        <PD 
                            hidden="hidden" 
                            readOnly={this.state.readOnly}
                            populatedSuspect={populatedSuspect}
                        />
                        <br/>
                        <br/>
                        <PNS hidden="hidden" readOnly={this.state.readOnly}/>
                        <br/>
                        <br/>
                        <Email readOnly={this.state.readOnly}/>
                        <br/>
                        <br/>
                    </div>
                    <div id="suspects_address">
                        <A readOnly={this.state.readOnly}/>
                        <br/>
                        <br/>
                    </div>
                </div>
            </form>
        );
    }
});

我的路线看起来像这样：

var routes = module.exports = (

    <Route path='/suspects' handler={SPA}>
    <Route name='NaturalPersonList' path='NaturalPersonList' handler={NaturalPersonList} >
    <Route name='NaturalPerson' path='NaturalPerson/:naturalPersonId' handler={NaturalPerson} />
    <Route name='EditNaturalPerson' path='EditNaturalPerson' handler={EditNaturalPerson}>
    <Route name='PersonalDetails' handler={PersonalDetails} />
    <Route name='NaturalPersonAddress' handler={NPAddress} />
    <Route name='PhoneNumbers' handler={PhoneNumbers} />
    <Route name='Email' handler={Email} />
    </Route>
    </Route>
    </Route>    
);

我正在使用react-router 0.13.3