react-router使用history.push路由跳转出错

Question

react-router使用history.push路由跳转出错问题

• 路由页面http://localhost:8888/detail/5aae1cc8f5dfc27d7ad98909
• 路由形式

<Route path="/detail/:id" component = {TopicDetail} key = "detail" />
<Route path="/user/login" component = {UserLogin} key = 'login' />

• 组件TopicDetail部分代码

class TopicDetail extends React.Component{
    static contextTypes = {
        router:PropTypes.object,
    }
    constructor(props){
        super(props)
        this.goToLogin = this.goToLogin.bind(this)
    }
    /*-------登入并回复-------*/
    goToLogin() {
        this.context.router.history.push('user/login')
    }

    render() {
        return (
            <div>
                <section className={classes.notLoginButton}>
                    <Button raised color="inherit" onClick={this.goToLogin}>
                                     登入并回复
                    </Button>
                </section>
            </div>
        )
    }
}

• 问题：单击按钮调用 this.context.router.history.push('user/login')，为什么路由从http://localhost:8888/detail/5aae1cc8f5dfc27d7ad98909跳转到http://localhost:8888/detail/user/login而不是http://localhost:8888/user/login

Answer 1

最好给下代码Demo，这样没法解决

Answer 2

看看路径有没有错，加个"/" "./" 试试看。

Answer 3

this.context.router.history.push('/user/login')
最前面要加一个/

Answer 4

用<Switch>把你的router包一下。

<Switch>
 <Router />
 <Router />
</Switch>