1 | # @mapbox/batfish/modules
|
2 |
|
3 | Batfish exposes a few public modules to hook into its routing system and other internals.
|
4 |
|
5 | ## Table of contents
|
6 |
|
7 | - [route-to](#route-to)
|
8 | - [route-to API](#route-to-api)
|
9 | - [route-to examples](#route-to-examples)
|
10 | - [prefix-url](#prefix-url)
|
11 | - [prefix-url API](#prefix-url-api)
|
12 | - [prefix-url examples](#prefix-url-examples)
|
13 | - [route-change-listeners](#route-change-listeners)
|
14 | - [route-change-listeners API](#route-change-listeners-api)
|
15 | - [with-location](#with-location)
|
16 | - [with-location API](#with-location-api)
|
17 | - [with-location example](#with-location-example)
|
18 |
|
19 | ## route-to
|
20 |
|
21 | Import from `'@mapbox/batfish/modules/route-to'`.
|
22 |
|
23 | ### route-to API
|
24 |
|
25 | The following functions are named exports of `'@mapbox/batfish/modules/route-to'`.
|
26 |
|
27 | #### routeTo
|
28 |
|
29 | `routeTo(url: string): void`
|
30 |
|
31 | If `url` is a Batfish route, go there with client-side routing.
|
32 | If it's not, go there with a regular page load.
|
33 |
|
34 | #### routeToPrefixed
|
35 |
|
36 | `routeToPrefixed(url: string): void`
|
37 |
|
38 | Like `routeTo` but automatically prefixes client-side routes with your [`siteOrigin`] configuration option.
|
39 |
|
40 | ### route-to examples
|
41 |
|
42 | ```js
|
43 | // Let's imagine:
|
44 | // - siteBasePath === '/about/jobs/'
|
45 | // - /about/jobs/writer/ is a page you made.
|
46 | import { routeTo, routeToPrefixed } from '@mapbox/batfish/modules/route-to';
|
47 |
|
48 | // Client-side routing is used.
|
49 | routeTo('/about/jobs/writer/');
|
50 |
|
51 | // Client-side routing sends you to /about/jobs/writer/.
|
52 | routeToPrefixed('writer');
|
53 |
|
54 | // Regular link behavior is used, since this is not a page that Batfish made.
|
55 | routeTo('/somewhere/else');
|
56 | ```
|
57 |
|
58 | ## prefix-url
|
59 |
|
60 | Use this module to prefix URLs on your site according to the [`siteBasePath`] and [`siteOrigin`] you specified in your configuration, ensuring that they point to the right place both during development and in production.
|
61 |
|
62 | Import from `'@mapbox/batfish/modules/prefix-url'`.
|
63 |
|
64 | ### prefix-url API
|
65 |
|
66 | The following functions are named exports of `'@mapbox/batfish/modules/prefix-url'`.
|
67 |
|
68 | #### prefixUrl
|
69 |
|
70 | `prefixUrl(url: string): string`
|
71 |
|
72 | Returns the URL prefixed with your [`siteBasePath`].
|
73 |
|
74 | If `url` is an absolute URL, it is returned unmodified.
|
75 | If `url` is already prefixed with your [`siteBasePath`], it is returned unmodified.
|
76 |
|
77 | #### prefixUrlAbsolute
|
78 |
|
79 | `prefixUrlAbsolute(url: string): string`
|
80 |
|
81 | Prefixes the URL with your [`siteOrigin`] and [`siteBasePath`], returning an absolute URL.
|
82 |
|
83 | If `url` is already an absolute URL, it is returned unmodified.
|
84 |
|
85 | **If you have not set [`siteOrigin`] in your configuration, this function with throw an error.**
|
86 |
|
87 | ### prefix-url examples
|
88 |
|
89 | ```js
|
90 | // Let's imagine:
|
91 | // - siteBasePath === '/about/jobs/'
|
92 | // - siteOrigin === 'https://mydomain.com'
|
93 | import { prefixUrl, prefixUrlAbsolute } from '@mapbox/batfish/modules/prefix-url';
|
94 |
|
95 | // The function prefixes a URL with siteBasePath.
|
96 | prefixUrl('engineer') // -> '/about/jobs/engineer'
|
97 |
|
98 | // You can also prefix an absolute path, if you've provided siteOrigin.
|
99 | prefixUrlAbsolute('engineer') // -> 'https://mydomain.com/about/jobs/engineer'
|
100 | ```
|
101 |
|
102 | ## route-change-listeners
|
103 |
|
104 | Batfish exposes a few functions that allow you to do things when client-side route changes occur.
|
105 |
|
106 | Import from `'@mapbox/batfish/modules/route-change-listeners'`.
|
107 |
|
108 | ### route-change-listeners API
|
109 |
|
110 | The following functions are named exports of `@mapbox/batfish/modules/route-change-listeners`.
|
111 |
|
112 | #### addRouteChangeStartListener
|
113 |
|
114 | ```
|
115 | addRouteChangeStartListener(pathname: string, listener: Function): Function;
|
116 | addRouteChangeStartListener(listener: Function): Function;
|
117 | ```
|
118 |
|
119 | Returns a function that will remove the listener — the equivalent of calling `removeRouteChangeStartListener` with the same arguments.
|
120 |
|
121 | If `pathname` is provided (i.e. the first argument is a string), only route changes to this pathname will invoke the `listener`.
|
122 | Otherwise, all route changes will invoke the `listener`.
|
123 |
|
124 | The `listener` function receives the incoming pathname as an argument.
|
125 |
|
126 | **The `listener` will be invoked immediately *before* the incoming page chunk starts downloading.**
|
127 | If you return a `Promise` from your callback, **you can use this to delay rendering of the next page** (if, for example, you want to show a loading spinner for some period of time, or load some data before switching pages).
|
128 | After the page chunk finishes downloading, the next page will not be rendered until your retured `Promise` has resolved.
|
129 |
|
130 | #### removeRouteChangeStartListener
|
131 |
|
132 | ```
|
133 | removeRouteChangeStartListener(pathname?: string, listener?: Function): Function;
|
134 | removeRouteChangeStartListener(listener?: Function): Function;
|
135 | ```
|
136 |
|
137 | If `pathname` is provided (i.e. the first argument is a string), `listener` will only be removed for route changes to this pathname .
|
138 | Otherwise, `listener` will be removed for all route changes.
|
139 |
|
140 | If no `listener` is provided, all listeners for the matched path (either `pathname` or all paths) will be removed.
|
141 |
|
142 | #### addRouteChangeEndListener
|
143 |
|
144 | ```
|
145 | addRouteChangeEndListener(pathname: string, listener: Function): Function;
|
146 | addRouteChangeEndListener(listener: Function): Function;
|
147 | ```
|
148 |
|
149 | The parameters and return value are equivalent to those for [`addRouteChangeStartListener`].
|
150 |
|
151 | The difference is that **this function will be invoked immediately *after* the incoming page renders.**
|
152 | The page chunk will have downloaded, your start-listener callbacks will have been invoked, the URL will have been changed, and the page will have rendered.
|
153 | What you return from your `callback` will have no affect on page rendering.
|
154 |
|
155 | `addRouteChangeEndListener` returns a function that will remove this particular listener.
|
156 |
|
157 | #### removeRouteChangeEndListener
|
158 |
|
159 | ```
|
160 | removeRouteChangeEndListener(pathname?: string, listener?: Function): Function;
|
161 | removeRouteChangeEndListener(listener?: Function): Function;
|
162 | ```
|
163 |
|
164 | The parameters and return value are equivalent to those for [`removeRouteChangeStartListener`].
|
165 |
|
166 | ## with-location
|
167 |
|
168 | Import from `'@mapbox/batfish/modules/with-location'`.
|
169 |
|
170 | This module exports a higher-order component that you can use to inject an abbreviated [Location](https://developer.mozilla.org/en-US/docs/Web/API/Location) object into the props of your own component.
|
171 |
|
172 | ### with-location API
|
173 |
|
174 | The function functions are named exports from `'@mapbox/batfish/modules/with-location'`.
|
175 |
|
176 | #### withLocation
|
177 |
|
178 | ```
|
179 | withLocation(Component: React.Component): React.Component
|
180 | ```
|
181 |
|
182 | Wraps `Component` in a stateless function component that passes it a `location` prop.
|
183 |
|
184 | The value of `location` is an object with the following properties:
|
185 |
|
186 | - `pathname`: This is *always* available (even at build time, during static rendering) because it is provided by Batfish's router.
|
187 | - `hash`: This will not be available during static rendering, so check for its existence before using it.
|
188 | - `search`: This will not be available during static rendering, so check for its existence before using it.
|
189 |
|
190 | Returns the wrapper component.
|
191 | The returned component exposes the original, wrapped component on the `WrappedComponent` static property.
|
192 |
|
193 | ### with-location example
|
194 |
|
195 | ```js
|
196 | const withLocation = require('@mapbox/batfish/modules/with-location');
|
197 |
|
198 | class MyPage extends React.Component {
|
199 | render() {
|
200 | return (
|
201 | <div>
|
202 | <div>pathname: {this.props.location.pathname}</div>
|
203 | <div>hash: {this.props.location.hash}</div>
|
204 | <div>search: {this.props.location.search}</div>
|
205 | </div>
|
206 | )
|
207 | }
|
208 | }
|
209 |
|
210 | module.exports = withLocation(MyPage);
|
211 | ```
|
212 |
|
213 | [`sitebasepath`]: ./configuration.md#sitebasepath
|
214 |
|
215 | [`siteorigin`]: ./configuration.md#siteorigin
|
216 |
|
217 | [`addroutechangestartlistener`]: #addroutechangestartlistener
|
218 |
|
219 | [`removeroutechangestartlistener`]: #removeroutechangestartlistener
|
220 |
|
221 | [`removeroutechangeendlistener`]: #removeroutechangeendlistener
|