reitit/frontend/browser.html

937 lines
25 KiB
HTML
Raw Normal View History

<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Browser integration · GitBook</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-hints/plugin-hints.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="controllers.html" />
<link rel="prev" href="basics.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="header">Introduction</li>
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="header">Basics</li>
<li class="chapter " data-level="2.1" data-path="../basics/route_syntax.html">
<a href="../basics/route_syntax.html">
Route Syntax
</a>
</li>
<li class="chapter " data-level="2.2" data-path="../basics/router.html">
<a href="../basics/router.html">
Router
</a>
</li>
<li class="chapter " data-level="2.3" data-path="../basics/path_based_routing.html">
<a href="../basics/path_based_routing.html">
Path-based Routing
</a>
</li>
<li class="chapter " data-level="2.4" data-path="../basics/name_based_routing.html">
<a href="../basics/name_based_routing.html">
Name-based Routing
</a>
</li>
<li class="chapter " data-level="2.5" data-path="../basics/route_data.html">
<a href="../basics/route_data.html">
Route Data
</a>
</li>
<li class="chapter " data-level="2.6" data-path="../basics/route_data_validation.html">
<a href="../basics/route_data_validation.html">
Route Data Validation
</a>
</li>
<li class="chapter " data-level="2.7" data-path="../basics/route_conflicts.html">
<a href="../basics/route_conflicts.html">
Route Conflicts
</a>
</li>
<li class="chapter " data-level="2.8" data-path="../basics/error_messages.html">
<a href="../basics/error_messages.html">
Error Messages
</a>
</li>
<li class="header">Coercion</li>
<li class="chapter " data-level="3.1" data-path="../coercion/coercion.html">
<a href="../coercion/coercion.html">
Coercion Explained
</a>
</li>
<li class="chapter " data-level="3.2" data-path="../coercion/schema_coercion.html">
<a href="../coercion/schema_coercion.html">
Plumatic Schema
</a>
</li>
<li class="chapter " data-level="3.3" data-path="../coercion/clojure_spec_coercion.html">
<a href="../coercion/clojure_spec_coercion.html">
Clojure.spec
</a>
</li>
<li class="chapter " data-level="3.4" data-path="../coercion/data_spec_coercion.html">
<a href="../coercion/data_spec_coercion.html">
Data-specs
</a>
</li>
<li class="header">Ring</li>
<li class="chapter " data-level="4.1" data-path="../ring/ring.html">
<a href="../ring/ring.html">
Ring-router
</a>
</li>
<li class="chapter " data-level="4.2" data-path="../ring/reverse_routing.html">
<a href="../ring/reverse_routing.html">
Reverse-routing
</a>
</li>
<li class="chapter " data-level="4.3" data-path="../ring/default_handler.html">
<a href="../ring/default_handler.html">
Default handler
</a>
</li>
<li class="chapter " data-level="4.4" data-path="../ring/slash_handler.html">
<a href="../ring/slash_handler.html">
Slash handler
</a>
</li>
<li class="chapter " data-level="4.5" data-path="../ring/static.html">
<a href="../ring/static.html">
Static Resources
</a>
</li>
<li class="chapter " data-level="4.6" data-path="../ring/dynamic_extensions.html">
<a href="../ring/dynamic_extensions.html">
Dynamic Extensions
</a>
</li>
<li class="chapter " data-level="4.7" data-path="../ring/data_driven_middleware.html">
<a href="../ring/data_driven_middleware.html">
Data-driven Middleware
</a>
</li>
<li class="chapter " data-level="4.8" data-path="../ring/transforming_middleware_chain.html">
<a href="../ring/transforming_middleware_chain.html">
Transforming Middleware Chain
</a>
</li>
<li class="chapter " data-level="4.9" data-path="../ring/middleware_registry.html">
<a href="../ring/middleware_registry.html">
Middleware Registry
</a>
</li>
<li class="chapter " data-level="4.10" data-path="../ring/exceptions.html">
<a href="../ring/exceptions.html">
Exception Handling with Ring
</a>
</li>
<li class="chapter " data-level="4.11" data-path="../ring/default_middleware.html">
<a href="../ring/default_middleware.html">
Default Middleware
</a>
</li>
<li class="chapter " data-level="4.12" data-path="../ring/content_negotiation.html">
<a href="../ring/content_negotiation.html">
Content Negotiation
</a>
</li>
<li class="chapter " data-level="4.13" data-path="../ring/coercion.html">
<a href="../ring/coercion.html">
Pluggable Coercion
</a>
</li>
<li class="chapter " data-level="4.14" data-path="../ring/route_data_validation.html">
<a href="../ring/route_data_validation.html">
Route Data Validation
</a>
</li>
<li class="chapter " data-level="4.15" data-path="../ring/compiling_middleware.html">
<a href="../ring/compiling_middleware.html">
Compiling Middleware
</a>
</li>
<li class="chapter " data-level="4.16" data-path="../ring/swagger.html">
<a href="../ring/swagger.html">
Swagger Support
</a>
</li>
<li class="chapter " data-level="4.17" data-path="../ring/RESTful_form_methods.html">
<a href="../ring/RESTful_form_methods.html">
RESTful form methods
</a>
</li>
<li class="header">HTTP</li>
<li class="chapter " data-level="5.1" data-path="../http/interceptors.html">
<a href="../http/interceptors.html">
Interceptors
</a>
</li>
<li class="chapter " data-level="5.2" data-path="../http/pedestal.html">
<a href="../http/pedestal.html">
Pedestal
</a>
</li>
<li class="chapter " data-level="5.3" data-path="../http/sieppari.html">
<a href="../http/sieppari.html">
Sieppari
</a>
</li>
<li class="chapter " data-level="5.4" data-path="../http/default_interceptors.html">
<a href="../http/default_interceptors.html">
Default Interceptors
</a>
</li>
<li class="chapter " data-level="5.5" data-path="../http/transforming_interceptor_chain.html">
<a href="../http/transforming_interceptor_chain.html">
Transforming Interceptor Chain
</a>
</li>
<li class="header">Frontend</li>
<li class="chapter " data-level="6.1" data-path="basics.html">
<a href="basics.html">
Basics
</a>
</li>
<li class="chapter active" data-level="6.2" data-path="browser.html">
<a href="browser.html">
Browser integration
</a>
</li>
<li class="chapter " data-level="6.3" data-path="controllers.html">
<a href="controllers.html">
Controllers
</a>
</li>
<li class="header">Advanced</li>
<li class="chapter " data-level="7.1" data-path="../advanced/configuring_routers.html">
<a href="../advanced/configuring_routers.html">
Configuring Routers
</a>
</li>
<li class="chapter " data-level="7.2" data-path="../advanced/composing_routers.html">
<a href="../advanced/composing_routers.html">
Composing Routers
</a>
</li>
<li class="chapter " data-level="7.3" data-path="../advanced/different_routers.html">
<a href="../advanced/different_routers.html">
Different Routers
</a>
</li>
<li class="chapter " data-level="7.4" data-path="../advanced/route_validation.html">
<a href="../advanced/route_validation.html">
Route Validation
</a>
</li>
<li class="chapter " data-level="7.5" data-path="../advanced/dev_workflow.html">
<a href="../advanced/dev_workflow.html">
Dev Workflow
</a>
</li>
<li class="chapter " data-level="7.6" data-path="../advanced/shared_routes.html">
<a href="../advanced/shared_routes.html">
Shared Routes
</a>
</li>
<li class="header">Misc</li>
<li class="chapter " data-level="8.1" data-path="../performance.html">
<a href="../performance.html">
Performance
</a>
</li>
<li class="chapter " data-level="8.2" data-path="../development.html">
<a href="../development.html">
Development Instructions
</a>
</li>
<li class="chapter " data-level="8.3" data-path="../faq.html">
<a href="../faq.html">
FAQ
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Browser integration</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="frontend-browser-integration">Frontend browser integration</h1>
<p>Reitit includes two browser history integrations.</p>
<p>Functions follow HTML5 History API: <code>push-state</code> to change route, <code>replace-state</code>
to change route without leaving previous entry in browser history.</p>
<h2 id="fragment-router">Fragment router</h2>
<p>Fragment is simple integration which stores the current route in URL fragment,
i.e. after <code>#</code>. This means the route is never part of the request URI and
server will always know which file to return (<code>index.html</code>).</p>
<h2 id="html5-router">HTML5 router</h2>
<p>HTML5 History API can be used to modify the URL in browser without making
request to the server. This means the URL will look normal, but the downside is
that the server must respond to all routes with correct file (<code>index.html</code>).
Check examples for simple Ring handler example.</p>
<h3 id="anchor-click-handling">Anchor click handling</h3>
<p>HTML5 History router will handle click events on anchors where the href
matches the route tree (and other <a href="../../modules/reitit-frontend/src/reitit/frontend/history.cljs#L84-L98">rules</a>).
If you have need to control this logic, for example to handle some
anchor clicks where the href matches route tree normally (i.e. browser load)
you can provide <code>:ignore-anchor-click?</code> function to add your own logic to
event handling:</p>
<pre><code class="lang-clj">(<span class="hljs-name">rfe/start!</span>
router
{<span class="hljs-symbol">:use-fragment</span> <span class="hljs-literal">false</span>
<span class="hljs-symbol">:ignore-anchor-click?</span> (<span class="hljs-name"><span class="hljs-builtin-name">fn</span></span> [router e el uri]
<span class="hljs-comment">;; Add additional check on top of the default checks</span>
(<span class="hljs-name"><span class="hljs-builtin-name">and</span></span> (<span class="hljs-name">rfh/ignore-anchor-click?</span> router e el uri)
(<span class="hljs-name"><span class="hljs-builtin-name">not=</span></span> <span class="hljs-string">&quot;false&quot;</span> (<span class="hljs-name">gobj/get</span> (<span class="hljs-name">.-dataset</span> el) <span class="hljs-string">&quot;reititHandleClick&quot;</span>))))})
<span class="hljs-comment">;; Use data-reitit-handle-click to disable Reitit anchor handling</span>
[<span class="hljs-symbol">:a</span>
{<span class="hljs-symbol">:href</span> (<span class="hljs-name">rfe/href</span> <span class="hljs-symbol">::about</span>)
<span class="hljs-symbol">:data-reitit-handle-click</span> <span class="hljs-literal">false</span>}
<span class="hljs-string">&quot;About&quot;</span>]
</code></pre>
<h2 id="easy">Easy</h2>
<p>Reitit frontend routers require storing the state somewhere and passing it to
all the calls. Wrapper <code>reitit.frontend.easy</code> is provided which manages
a router instance and passes the instance to all calls. This should
allow easy use in most applications, as browser anyway can only have single
event handler for page change events.</p>
<h2 id="history-manipulation">History manipulation</h2>
<p>Reitit doesn&apos;t include functions to manipulate the history stack, i.e.
go back or forwards, but calling History API functions directly should work:</p>
<pre><code>(.go js/window.history -1)
;; or
(.back js/window.history)
</code></pre>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="basics.html" class="navigation navigation-prev " aria-label="Previous page: Basics">
<i class="fa fa-angle-left"></i>
</a>
<a href="controllers.html" class="navigation navigation-next " aria-label="Next page: Controllers">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Browser integration","level":"6.2","depth":1,"next":{"title":"Controllers","level":"6.3","depth":1,"path":"frontend/controllers.md","ref":"frontend/controllers.md","articles":[]},"previous":{"title":"Basics","level":"6.1","depth":1,"path":"frontend/basics.md","ref":"frontend/basics.md","articles":[]},"dir":"ltr"},"config":{"plugins":["hints","editlink","github","highlight"],"root":"doc","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://github.com/metosin/reitit"},"editlink":{"label":"Edit This Page","multilingual":false,"base":"https://github.com/metosin/reitit/tree/master/doc"},"search":{},"hints":{"danger":"fa fa-exclamation-circle","info":"fa fa-info-circle","tip":"fa fa-mortar-board","working":"fa fa-wrench"},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"gitbook":"*"},"file":{"path":"frontend/browser.md","mtime":"2020-05-15T14:54:14.355Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-05-15T14:55:07.650Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-editlink/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>