undefinedfix
Sign in

In react router this.props.history . push, the URL changes, but the page doesn't

iurrs edited in Wed, 17 Feb 2021

React router is V4 version, the code is as follows

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 (
            <div>
                <Router>
                    <div>
                        <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>
                        <div className="index-bottom">
                            <div onClick={ this.handleRouterPush.bind(this, '/index/work') }>
                                <div className="index-bottom-icon">
                                    <span>工作</span>
                                </div>
                            </div>
                            <div onClick={ this.handleRouterPush.bind(this, '/index/info') }>
                                <div className="index-bottom-icon">
                                    <span>个人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </Router>
            </div>
        );
    }
}

export default withRouter(Index);

It's OK to use link jump instead, but this.props.history . push won't work. Why?

2 Replies
suxbr
commented on Wed, 17 Feb 2021

I solved it. Because this component is in the App.js In the route load, I am in the App.js The router component is also used in it, and it seems that the index.js The router component is repeated. I put index.js Just delete the router in it

user617051
commented on Wed, 17 Feb 2021
<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>

try

lock This question has been locked and the reply function has been disabled.