javascript - this.props.history.push dalam React-router, url telah berubah, tetapi halaman tidak berubah

Question

react-router ialah versi v4, kodnya adalah seperti berikut

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

Jika anda menukar untuk menggunakan Pautan untuk melompat, ia akan berfungsi, tetapi ini.props.history.push tidak akan berfungsi. Mengapa ini?

Answer 1

Saya menyelesaikannya. Oleh kerana komponen ini dimuatkan dalam Route dalam App.js, dan saya juga menggunakan komponen Router dalam App.js, nampaknya ia akan diduplikasi jika saya menggunakan komponen Router dalam index.js. Saya hanya memadamkan Penghala dalam index.js dan ia akan baik-baik saja

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>

Cubalah