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
Copy file name to clipboardExpand all lines: docs/guides/Histories.md
+14-13Lines changed: 14 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,8 +9,8 @@ There are three types of histories you'll come across most often, but
9
9
note that anyone can build a custom history implementation for
10
10
consumption with React Router.
11
11
12
-
-[`hashHistory`](#hashhistory)
13
12
-[`browserHistory`](#browserhistory)
13
+
-[`hashHistory`](#hashhistory)
14
14
-[`createMemoryHistory`](#creatememoryhistory)
15
15
16
16
You import them from the React Router package:
@@ -29,22 +29,12 @@ render(
29
29
)
30
30
```
31
31
32
-
### `hashHistory`
33
-
Hash history uses the hash (`#`) portion of the URL, creating routes that look like `example.com/#/some/path`.
34
-
35
-
#### Should I use `hashHistory`?
36
-
Hash history works without configuring your server, so if you're just getting started, go ahead and use it. But, we don't recommend using it in production, every web app should aspire to use `browserHistory`.
37
-
38
-
#### What is that `?_k=ckuvup` junk in the URL?
39
-
When a history transitions around your app with `push` or `replace`, it can store "location state" that doesn't show up in the URL on the new location, think of it a little bit like post data in an HTML form.
40
-
41
-
The DOM API that hash history uses to transition around is simply `window.location.hash = newHash`, with no place to store location state. But, we want all histories to be able to use location state, so we shim it by creating a unique key for each location and then store that state in session storage. When the visitor clicks "back" and "forward" we now have a mechanism to restore the location state.
42
-
43
32
### `browserHistory`
44
33
Browser history is the recommended history for browser application with React Router. It uses the [History](https://developer.mozilla.org/en-US/docs/Web/API/History) API built into the browser to manipulate the URL, creating real URLs that look like `example.com/some/path`.
45
34
46
35
#### Configuring Your Server
47
-
Your server must be ready to handle real URLs. When the app first loads at `/` it will probably work, but as the user navigates around and then hits refresh at `/accounts/23` your web server will get a request to `/accounts/23`. You will need it to handle that URL and include your JavaScript application in the response.
36
+
37
+
In order to allow the user to reload or bookmark any page on your app, your server will need to respond to any url that the react code generates and serve the single page app. For example, if the user bookmarks `/accounts/23` and then clicks on that bookmark, the web server will get a request for `/accounts/23` and will need to handle it by serving the single page app. React-route will render the right component for that route, as long as the javascript code gets to the browser.
48
38
49
39
An express app might look like this:
50
40
@@ -95,6 +85,17 @@ We feature detect to see if we can use the browser's native `window.history` API
95
85
96
86
You might wonder why we don't fall back to hash history; the problem is that URLs become non-deterministic. If a visitor on hash history shares a URL with a visitor on browser history, and then they share that back, we end up with a terrible cartesian product of infinite potential URLs.
97
87
88
+
### `hashHistory`
89
+
Hash history uses the hash (`#`) portion of the URL, creating routes that look like `example.com/#/some/path`.
90
+
91
+
#### Should I use `hashHistory`?
92
+
Hash history works without configuring your server, so if you're just getting started, go ahead and use it. But, we don't recommend using it in production, every web app should aspire to use `browserHistory`.
93
+
94
+
#### What is that `?_k=ckuvup` junk in the URL?
95
+
When a history transitions around your app with `push` or `replace`, it can store "location state" that doesn't show up in the URL on the new location, think of it a little bit like post data in an HTML form.
96
+
97
+
The DOM API that hash history uses to transition around is simply `window.location.hash = newHash`, with no place to store location state. But, we want all histories to be able to use location state, so we shim it by creating a unique key for each location and then store that state in session storage. When the visitor clicks "back" and "forward" we now have a mechanism to restore the location state.
98
+
98
99
### `createMemoryHistory`
99
100
Memory history doesn't manipulate or read from the address bar. This is how we implement server rendering. It's also useful for testing and other rendering environments (like React Native).
0 commit comments