当多个<router />使用同一个组件的时候，切换页面地址，页面不刷新的问题

如标题所说的问题，更详细一点就是多个router使用同一个react页面组件的时候，当切换路由的时候，页面组件不重新构建，页面也不刷新。

例如：

router.js

import Index from './routes/Index/index';
import UserAccount from './routes/UserAccount/index';

const Root = () =>(
<Router history={history} >
<div style={{ height:'100%' }}>
<Route exact path='/' component={Login} />
<Route path="/sem" component={Layout}>
<Route path="Index" component={Index} />
<Route path="UserAccount" component={UserAccount} />
<Route path="UserAccountForMaster" component={UserAccount} />
<Route path="UserAccountForNormal" component={UserAccount} />
</Route>
</div>
</Router>
)

ReactDOM.render(<Root />,document.getElementById('root'))

UserAccount.js

import React from 'react';

export default class UserAccount extends React.Component {
constructor (props) {
super(props);
this.state = {
dataList:[]
}
}
componentWillMount () {

}
componentDidMount () {
sendFetch('http://www.baidu.com', {type:1}, 'GET')
.then(data=>{
this.setState({ listData:data.data.lists })
})
}
render () {
return (
<div>
<button>你好，祝你幸福，再见~</button>
<ul>
{
listData.length !== 0 ? listData.map((item,index)=>{
return <li>{item.name}</li>
}) : null
}
</ul>
</div>
)
}
}

以上情况当路由切换的时候，组件

UserAccount

只是重新render，并不重新构建，如果需要路由切换的时候，组件重新构建，重新完成一次生命周期，则需要给组件加上

key

；方法如下：

·····这是解决办法·····这是解决办法·····这是解决办法·····这是解决办法·····这是解决办法·····这是解决办法·····

路由不需要修改，我们只需要修改组件：

上面提到需要给组件加上key，让

router

的

path

属性（params）指向组件的key，就可以实现，组件的重构。

UserAccount.js

import React from 'react';

// 注意这里
class UserAccount extends React.Component {
constructor (props) {
super(props);
this.state = {
dataList:[]
}
}
componentWillMount () {

}
componentDidMount () {
sendFetch('http://www.baidu.com', {type:1}, 'GET')
.then(data=>{
this.setState({ listData:data.data.lists })
})
}
render () {
return (
<div>
<button>你好，祝你幸福，再见~</button>
<ul>
{
listData.length !== 0 ? listData.map((item,index)=>{
return <li>{item.name}</li>
}) : null
}
</ul>
</div>
)
}
}

// 注意这里
export default (props)=><UserAccount {...props} key={props.location.pathname} />

这里的

props.location.pathname

就是router的path属性的值，这样就实现了，router的path属性指向组件的key。

这样切换路由的时候，即可完成组件的刷新（重构）。