javascript - this.props.history.push dans React-router, l'url a changé, mais la page n'a pas changé

Question

react-router est la version v4, le code est le suivant

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect, withRouter } from 'react-router-dom';
import './index.less';
import Work from './index/work';
import Info from './index/info';

class Index extends Component {
    constructor(props) {
        super(props);
    }

    handleRouterPush(path, e) {
        this.props.history.push(path);
    }

    render() {
        return (
            <p>
                <Router>
                    <p>
                        <Switch>
                            <Route exact path="/index">
                                <Redirect from="/index" to="/index/work" />
                            </Route>
                            <Route path="/index/work" component={ Work } />
                            <Route path="/index/info" component={ Info } />
                        </Switch>
                        <p className="index-bottom">
                            <p onClick={ this.handleRouterPush.bind(this, '/index/work') }>
                                <p className="index-bottom-icon">
                                    <span>工作</span>
                                </p>
                            </p>
                            <p onClick={ this.handleRouterPush.bind(this, '/index/info') }>
                                <p className="index-bottom-icon">
                                    <span>个人</span>
                                </p>
                            </p>
                        </p>
                    </p>
                </Router>
            </p>
        );
    }
}

export default withRouter(Index);

Si vous changez pour utiliser Link pour sauter, cela fonctionnera, mais this.props.history.push ne fonctionnera pas. Pourquoi est-ce ?

Answer 1

Je l'ai résolu. Étant donné que ce composant est chargé dans Route dans App.js et que j'utilise également le composant Router dans App.js, il semble qu'il sera dupliqué si j'utilise le composant Router dans index.js. Je viens de supprimer le routeur dans index.js et tout ira bien

Answer 2

<Switch>
    <Route exact path="/index">
        <Redirect from="/index" to="/index/work" />
    </Route>
    <Route **exact** path="/index/work" component={ Work } />
    <Route **exact** path="/index/info" component={ Info } />
</Switch>

Essayez-le