Reagieren Router Link zu, innerhalb Karte Funktion, funktioniert nur einmal

Question

Ich habe diese react router example gefolgt, aber wenn ich ein zweites Mal auf einen anderen Benutzer klicken, scheint es, dass die Benutzer-Komponente noch unverändert Zustand. So kann ich nur einen Benutzer sehen.

package.json

{ 
    "name": "raspberry", 
    "version": "1.0.0", 
    "description": "raspberry =========", 
    "main": "index.js", 
    "scripts": { 
    "start": "node webpack.dev-server.js", 
    "build": "webpack" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^0.14.7", 
    "react-bootstrap": "^0.30.7", 
    "react-dom": "^0.14.7", 
    "react-router": "^2.0.0", 
    "superagent":"^3.3.2" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "bootstrap-sass": "^3.3.7", 
    "css-loader": "^0.26.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.9.0", 
    "node-sass": "^4.3.0", 
    "react-bootstrap": "^0.30.7", 
    "react-hot-loader": "^1.3.0", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.14.0", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 

app.js

ReactDom.render((
    <Router history={hashHistory}> 
     <Route path="/" component={Layout}> 
      <IndexRoute component={Home} /> 
      <Route path="/home" component={Home}/> 
      <Route path="/users" component={Users}> 
       <Route path="https://stackoverflow.com/users/:userId" component={User}/> 
      </Route> 
      <Route path="*" component={NoMatch} />  
     </Route> 
    </Router> 
), document.getElementById('app')); 

Users.js

const Users = React.createClass({ 
    getUsers: function() { 
     var self = this; 
     request 
      .get('/api/users') 
      .set('Auth', 'Bearer '+ this.state.token) 
      .end(function(err, res){ 
       if (res.statusCode === 200){ 
        self.setState({ 
         users:JSON.parse(res.text) 
        }) ; 

       }else{ 
        console.log('Get Users failed'); 
       } 

     }); 

    }, 
    getInitialState: function(props) { 
     props = props || this.props; 
     return { 
      token : localStorage.getItem("token"), 
      users:[] 

     }; 
    }, 
    componentDidMount: function() { 
     this.getUsers(); 
    }, 
    render: function() { 
     return(
      <div> 
       <h1>Users</h1> 
       <div className="master"> 
        <div className="list-group"> 
        {this.state.users.map(user => (
         <Link to={`/users/${user.id}`} key={user.id} className="list-group-item">{user.username}</Link> 
        ))} 
        </div> 
       </div> 
       <div className="detail"> 
        { this.props.children } 
       </div> 
       </div> 
     ); 
    } 
}); 

export default Users; 

user.js

const User = React.createClass({ 
    findUserById: function(id){ 
     var self = this; 
     request 
      .get('/api/users/'+id) 
      .set('Auth', 'Bearer '+ localStorage.getItem("token")) 
      .end(function(err, res){ 
       console.log(res); 
       if (res.statusCode === 200){ 
        self.setState({ 
         user:JSON.parse(res.text) 
        }) ; 

       }else{ 
        console.log('Get User failed'); 
       } 

     }); 
    }, 
    getInitialState: function() { 
     return {user:''}; 
    },  
    componentDidMount: function() { 
     console.log('componentDidMount'); 
     this.findUserById(this.props.params.userId) 
    }, 

    render:function() { 
    return (
     <div> 
     <h2>{this.state.user.username}</h2> 
     </div> 
    ) 
    } 
}); 
export default User; 

Answer 1

Wenn Sie sich an der Position /users/17 befinden, rendern Sie die Komponenten <Layout>, <Users> und <User>. Wenn Sie dann zum Speicherort /users/5 navigieren, werden immer noch dieselben Komponenten gerendert. Das bedeutet, dass <User> basierend auf dem neuen paramscomponentWillReceiveProps oder componentDidUpdate-Methode für diese Komponente implementieren müssen.