最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS中如何异步实现手动路由跳转页面

ReactJS crifan 3694浏览 0评论

之前是在Preact中,在一个input的button外部,加上一个Link href,去实现点击按钮路由跳转页面的:

        <div class={style.cows_n_down}>
          <Link href="/breedingManagement">
            <button
              onClick={this.handleSave}
              class={style.ui_btn}
              disabled={this.state.saveBtnDisabled ? "disabled" : ""}>保 存</button>
          </Link>
        </div>

现在为了动态的决定按钮是否被忌用,所以改为:

        <div class={style.cows_n_down}>
            <input
              onClick={this.handleSave}
              class={style.ui_btn}
              value="保 存"
              disabled={this.state.saveBtnDisabled ? "disabled" : ""}/>
        </div>

然后想要在按钮可以点击后,去执行对应的POST url

在callback中去实现:

手动路由 页面跳转

reactjs 异步 Link 跳转页面

preact-router manual link

preact-router link to

react-router async routes

Intl & Async Routes in React Router v4

preact-router transitionTo

react-router transitionTo

Route Transitions · Issue #29 · developit/preact-router

抽空再去看看:

组件外部跳转 | React Router 中文文档

的browserHistory

【总结】

最后是:

对于Preact-router来说,用route即可:

import { Link, route } from ‘preact-router’;
    this.props.fetch(
      url,
      。。。,
      (data) => {
        console.log(data);
        route("/breedingManagement");
      }
    );

即可实现手动跳转到对应的页面。

转载请注明:在路上 » 【已解决】ReactJS中如何异步实现手动路由跳转页面

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.207 seconds, using 22.10MB memory