You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Restructure turbolinks.md to clarify Turbo vs legacy Turbolinks
Reorganize turbolinks.md content to clearly separate modern Turbo
(recommended) from legacy Turbolinks support. All Turbolinks v2 and v5
content is now properly nested under "Legacy Turbolinks Support" section.
Key structural changes:
- "Using Turbo" section remains at H2 level (modern, recommended approach)
- Created "Legacy Turbolinks Support" H2 section with clear deprecation notice
- Nested all Turbolinks content as H3-H5 subsections:
- Why Turbolinks? (H3)
- Requirements and "Why Not" sections (H3)
- Installation details with checklists (H3→H4→H5)
- Turbolinks 5 Specific Information (H3)
- Technical Details and Troubleshooting (H3→H4)
Content improvements:
- Added explicit support status for Turbolinks 5.x and 2.x
- Clarified auto-detection behavior for legacy versions
- Moved CSRF/MIME type technical details under proper troubleshooting section
- Updated messaging from "may be outdated" to "still supported, migrate when possible"
Rationale: Based on codebase investigation (pageLifecycle.ts, turbolinksUtils.ts),
Turbo is the recommended navigation system since 2021. All Turbolinks versions
are legacy but still supported. Original flat structure mixed modern and legacy
content without clear distinction, potentially confusing users about which system
to use.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: docs/building-features/turbolinks.md
+31-23Lines changed: 31 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@
6
6
- See [PR 1374](https://github.com/shakacode/react_on_rails/pull/1374).
7
7
- Ability to use with [Turbo (`@hotwired/turbo`)](https://turbo.hotwired.dev/), as Turbolinks becomes obsolete.
8
8
9
-
# Using Turbo
9
+
##Using Turbo
10
10
11
11
To configure Turbo the following option can be set:
12
12
`ReactOnRails.setOptions({ turbo: true })`
@@ -15,36 +15,36 @@ Turbo is not auto-detected like older Turbolinks.
15
15
16
16
_TODO: Walk through code changes in PR 1620._
17
17
18
-
# Legacy Turbolinks
18
+
##Legacy Turbolinks Support
19
19
20
-
_The following docs may be outdated. We recommend updating to the latest Turbo or removing old Turbolinks._
20
+
_The following documentation covers older Turbolinks versions (2.x and 5.x). While still supported by React on Rails, we recommend migrating to Turbo when possible._
- See [Turbolinks on Github](https://github.com/rails/turbolinks)
23
-
- React on Rails currently supports 2.5.x of Turbolinks and 5.0.0 of Turbolinks 5.
24
-
- You may include Turbolinks either via yarn (recommended) or via the gem.
25
27
26
-
## Why Turbolinks?
28
+
You may include Turbolinks either via yarn (recommended) or via the gem.
29
+
30
+
### Why Turbolinks?
27
31
28
32
As you switch between Rails HTML controller requests, you will only load the HTML and you will not reload JavaScript and stylesheets.
29
33
This definitely can make an app perform better, even if the JavaScript and stylesheets are cached by the browser, as they will still require parsing.
30
34
31
-
## Requirements for Using Turbolinks
35
+
###Requirements for Using Turbolinks
32
36
33
37
1. Either **avoid using [React Router](https://reactrouter.com/)** or be prepared to deal with any conflicts between it and Turbolinks.
34
38
2.**Use one JS and one CSS file** throughout your app. Otherwise, you will have to figure out how best to handle multiple JS and CSS files throughout the app given Turbolinks.
35
39
36
-
## Why Not Turbolinks
40
+
###Why Not Turbolinks
37
41
38
42
1.[React Router](https://reactrouter.com/) handles the back and forward buttons, as does Turbolinks. You _might_ be able to make this work. _Please share your findings._
39
43
1. You want to do code splitting to minimize the JavaScript loaded.
40
44
41
-
##More Information
45
+
### Installation
42
46
43
-
- CSRF tokens need thorough checking with Turbolinks5. Turbolinks5 changes the head element by JavaScript (not only body) on page changes with the correct csrf meta tag. But if the JS code parsed this from head when several windows were opened, then our specs didn't all pass. I didn't examine the details, it may be caused by app code, not library code. Anyway, it may need additional checking because there is a CSRF helper in ReactOnRails and it needs to work with Turbolinks5.
44
-
- Turbolinks5 sends requests without the `Accept: */*` in the header, only exactly like `Accept: text/html` which makes Rails behave a bit specifically compared to normal and mime-parsing, which is skipped when Rails sees `*/*`. For more details on the special handling of `*/*` you can read [Mime Type Resolution in Rails](http://blog.bigbinary.com/2010/11/23/mime-type-resolution-in-rails.html).
45
-
- If you're using multiple Webpack bundles, make sure that there are no name conflicts between JS objects or Redux store paths.
46
-
47
-
### Install Checklist
47
+
#### Install Checklist
48
48
49
49
1. Include turbolinks via yarn as shown in the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/8a6c8aa2e3b7ae5b08b0a9744fb3a63a2fe0f002/client/webpack.client.base.config.js#L22) or include the gem "turbolinks".
50
50
1. Included the proper "track" tags when you include the javascript and stylesheet:
@@ -61,13 +61,7 @@ NOTE: for Turbolinks 2.x, use `'data-turbolinks-track' => true`
61
61
//= require turbolinks
62
62
```
63
63
64
-
## Turbolinks 5
65
-
66
-
Turbolinks 5 is now supported. React on Rails will automatically detect which version of Turbolinks you are using and use the correct event handlers.
67
-
68
-
For more information on Turbolinks 5: [https://github.com/turbolinks/turbolinks](https://github.com/turbolinks/turbolinks)
69
-
70
-
## Turbolinks from NPM
64
+
#### Turbolinks from NPM
71
65
72
66
See the [instructions on installing from NPM](https://github.com/turbolinks/turbolinks#installation-using-npm).
73
67
@@ -76,7 +70,7 @@ import Turbolinks from 'turbolinks';
76
70
Turbolinks.start();
77
71
```
78
72
79
-
### Async script loading
73
+
#####Async script loading
80
74
81
75
Async script loading can be done like this (starting with Shakapacker 8.2):
82
76
@@ -105,7 +99,21 @@ React on Rails 15 fixes both issues, so if you still have the listener it can be
105
99
> [!WARNING]
106
100
> Do not use `immediate_hydration: false` (React on Rails Pro licensed feature) with Turbolinks if you have async scripts.
107
101
108
-
## Troubleshooting
102
+
### Turbolinks 5 Specific Information
103
+
104
+
React on Rails will automatically detect which version of Turbolinks you are using (2.x or 5.x) and use the correct event handlers.
105
+
106
+
For more information on Turbolinks 5: [https://github.com/turbolinks/turbolinks](https://github.com/turbolinks/turbolinks)
107
+
108
+
### Technical Details and Troubleshooting
109
+
110
+
#### CSRF and MIME Type Handling
111
+
112
+
-**CSRF tokens**: Turbolinks 5 changes the head element by JavaScript (not only body) on page changes with the correct csrf meta tag. Be thorough checking CSRF tokens, especially when multiple windows are opened, as the CSRF helper in ReactOnRails needs to work with Turbolinks5.
113
+
-**MIME type handling**: Turbolinks 5 sends requests with `Accept: text/html` only (not `Accept: */*`), which makes Rails behave differently compared to normal requests. For more details on the special handling of `*/*` you can read [Mime Type Resolution in Rails](http://blog.bigbinary.com/2010/11/23/mime-type-resolution-in-rails.html).
114
+
-**Multiple Webpack bundles**: If you're using multiple Webpack bundles, make sure that there are no name conflicts between JS objects or Redux store paths.
115
+
116
+
#### Debugging Turbolinks Events
109
117
110
118
To turn on tracing of Turbolinks events, put this in your registration file, where you register your components.
0 commit comments