如何模拟与 history.push("/Initial"); 相同的行为？使用哈希路由器？

Posted 2023-02-21

【中文标题】如何模拟与 history.push("/Initial"); 相同的行为？使用哈希路由器？

【英文标题】：How can I simulate same behavior as history.push("/Initial"); using hash router?

【发布时间】：2021-01-06 11:34:34

【问题描述】：

我必须修改自：

   <Provider store=store>
        <I18nextProvider i18n=i18n>
          <BrowserRouter>
            <Header />
            <Main />
            <Footer />
          </BrowserRouter>
        </I18nextProvider>
      </Provider>

到：

  <Provider store=store>
            <I18nextProvider i18n=i18n>
              <HashRouter>
                <Header />
                <Main />
                <Footer />
              </HashRouter>
            </I18nextProvider>
          </Provider>

我进行了更改以避免刷新页面时出现 404 错误，并避免在从电子邮件发送激活 url 时出现同样的错误

现在，下面的代码不起作用

history.push("/Drawer");

我怎样才能做同样的事情，但使用 hashrouter

【参考方案1】：

试试这个：

// install react-router-dom
npm i react-router-dom

// import withRouter in your Component
import  withRouter  from 'react-router-dom';

// now you can use
// in class component
this.props.history.push('/Drawer');
// in function component
props.history.push('/Drawer');

// export your component
// without connect
export default withRouter(YourComponent);
// with connect
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(YourComponent));

【讨论】：

在问题中提供抽屉组件。