When multiple <router /> use the same component, the page address is switched, and the page does not refresh

As mentioned in the title, a more detailed point is that when multiple routers use the same react page component, when switching routes, the page component will not be rebuilt and the page will not be refreshed.

For example:

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>
        )
    }
}

In the above situation, when the route is switched, the component UserAccountis only re-rendered and not rebuilt. If it is necessary to re-build the component when the route is switched, and complete a life cycle again, it needs to be added to the component; the method is as follows key:

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

Routing does not need to be modified, we only need to modify the component:

As mentioned above, you need to add a key to the component, and let routerthe pathattributes (params) point to the key of the component, so that the reconstruction of the component can be realized.

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} />

Here props.location.pathnameis the value of the path attribute of the router, which is realized, and the path attribute of the router points to the key of the component.

In this way, when the route is switched, the refresh (refactoring) of the component can be completed.