JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page" id="main">
    <div data-role="header">
         <h1>Home</h1>

    </div>
    <div role="main" class="ui-content"> <a href="#search" class="ui-btn">Search page</a>

    </div>
</div>
<!-- search page -->
<div data-role="page" id="search">
    <div data-role="header" data-add-back-btn="true">
         <h1>Search</h1>

    </div>
    <div role="main" class="ui-content">
        <p>Search page</p> <a href="#result" class="ui-btn">Results page</a>

    </div>
</div>
<!-- result page -->
<div data-role="page" id="result">
    <div data-role="header" data-add-back-btn="true">
         <h1>Results</h1>

    </div>
    <div role="main" class="ui-content">
        <p>Results page</p>
        <p>Hit back button in header or browser's back button</p>
    </div>
</div>

JavaScript

$(document).on("pagecontainerbeforechange", function (e, data) {
    if (typeof data.toPage == "string" && data.options.direction == "back" && data.prevPage[0].id == "result") {
        data.toPage = "#main";
        data.options.transition = "flow";
    }
});