配置react-router,在浏览器上点击返回,无法匹配到上一次的路由

我现在配置了一个Transition的页面,这个页面想要做到是:当项目第一次启动在浏览器上输入localhost:3000时,router匹配到Transition,在Transition上做些其它的逻辑,再通过this.props.history.push({pathname:"/admin/home"})跳转到Home页面(用户页面)。现在发现正常从Transition跳转到Home页面问题,当我在其它页面来回切换时(用户页面和批量添加用户页面),再点击浏览器上的返回按钮,router会自动匹配到Trasition页面,如何让其匹配到上一次的页面?

export default class ERouter extends React.Component{

    render(){
        return (
            <HashRouter>
                <App>
                    <Switch>
                        <Route path="/login" component={Login}/>
                        <Route path='/transition' component={Transition} />
                        <Route path="/noMatch403" component={NoMatch403}/>
                        <Route path="/" exact  render={()=>
                            <Switch>
                                <Redirect to="/transition" />
                            </Switch>
                        } />                             
                        <Route path="/admin"  render={()=>
                            <Admin>
                                <Switch>
                                    <Route path='/admin/home' component={Home} />
                                    <Route path='/admin/batchuser' component={Batchuser} />
                                </Switch>
                            </Admin>
                        } />
                        <Route component={NoMatch404} />
                    </Switch>
                </App>
            </HashRouter>
        );
    }
}

如图:
图片描述

当我在“用户(Home)”和“批量添加用户(Batchuser)”的路由上来回切换的时候,点击浏览器上的返回,会自动匹配到Transition页面(浏览器地址显示:http://localhost:3000/#/transition),按正常做法应该是会返回到Home或者Batchuser页面,请教下为啥会出现这样的情况?我的路由配置应该如何修改?

阅读 2.6k
1 个回答

从这个过渡组件跳转其他组件的时候用 history.replace()

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题