Skip to content

Commit

Permalink
doc updates to new API
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanflorence committed Dec 28, 2015
1 parent fe5a98d commit 7390b65
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 60 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ You can find the library on `window.ReactRouter`.
```js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import { Router, Route, Link, browserHistory } from 'react-router'

const App = React.createClass({/*...*/})
const About = React.createClass({/*...*/})
Expand Down Expand Up @@ -112,7 +112,7 @@ const User = React.createClass({
// instead, all you really need is a single root route, you don't need to
// colocate the entire config).
render((
<Router>
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
Expand Down
2 changes: 1 addition & 1 deletion docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
- [RouteContext](#routecontext-mixin) (Deprecated)

* [Utilities](#utilities)
* [useRoutes](#useroutescreatehistory)
* [useRoutes](#useroutescreatehistory) (Deprecated)
* [match](#match-routes-location-options--cb)
* [createRoutes](#createroutesroutes)
* [PropTypes](#proptypes)
Expand Down
13 changes: 8 additions & 5 deletions docs/Introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ Let's refactor our app to use React Router.
import React from 'react'
import { render } from 'react-dom'

// First we import some components...
import { Router, Route, Link } from 'react-router'
// First we import some modules...
import { Router, Route, Link, browserHistory } from 'react-router'

// Then we delete a bunch of code from App and
// add some <Link> elements...
Expand Down Expand Up @@ -134,8 +134,9 @@ const App = React.createClass({
// Finally, we render a <Router> with some <Route>s.
// It does all the fancy routing stuff for us.
render((
<Router>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox} />
</Route>
Expand All @@ -151,6 +152,7 @@ Internally, the router converts your `<Route>` element hierarchy to a [route con
const routes = {
path: '/',
component: App,
indexRoute: { component: Home },
childRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
Expand Down Expand Up @@ -187,6 +189,7 @@ const Inbox = React.createClass({
render((
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
{/* add some nested routes where we want the UI to nest */}
Expand All @@ -205,7 +208,7 @@ Now visits to URLs like `inbox/messages/Jkei3c32` will match the new route and b
```
<App>
<Inbox>
<Message params={ {id: 'Jkei3c32'} } />
<Message params={{ id: 'Jkei3c32' }}/>
</Inbox>
</App>
```
Expand All @@ -215,7 +218,7 @@ And visits to `/inbox` will build this:
```
<App>
<Inbox>
<InboxStats />
<InboxStats/>
</Inbox>
</App>
```
Expand Down
33 changes: 8 additions & 25 deletions docs/guides/advanced/NavigatingOutsideOfComponents.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,16 @@
# Navigating Outside of Components

While route components get `this.props.history` and the `History` mixin
provides `this.history`, many apps want to be able to navigate outside
of their components.

Its pretty simple, just hang on to your history object:

You can have a module in your app somewhere that exports your history
object.
While route components get `this.props.router`, and `Router` puts on context `this.context.router` to navigate around, many apps want to be able to navigate outside of their components. They can do that with the history the app gives to `Router`.

```js
// history.js
import createBrowserHistory from 'history/lib/createBrowserHistory'
export default createBrowserHistory()
// your main file that renders a Router
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'
render(<Router history={browserHistory} routes={routes}/>, el)
```

And then import it to render a `<Router>`:

```js
// index.js
import history from './history'
render(<Router history={history} routes={routes}/>, el)
```

And now you can use that history object anywhere in your app, maybe in a
flux actions file

```js
// actions.js
import history from './history'
history.replaceState(null, '/some/path')
// somewhere like a redux/flux action file:
import { browserHistory } from './react-router'
browserHistory.push('/some/path')
```
48 changes: 21 additions & 27 deletions docs/guides/basics/Histories.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Histories

React Router is built on [history](https://github.com/rackt/history).
React Router is built with [history](https://github.com/rackt/history).
In a nutshell, a history knows how to listen to the browser's address
bar for changes and parses the URL into a `location` object that the
router can use to match routes and render the correct set of components.
Expand All @@ -9,50 +9,38 @@ There are three types of histories you'll come across most often, but
note that anyone can build a custom history implementation for
consumption with React Router.

- [`createHashHistory`](#createhashhistory)
- [`createBrowserHistory`](#createbrowserhistory)
- [`hashHistory`](#hashhistory)
- [`browserHistory`](#browserhistory)
- [`createMemoryHistory`](#creatememoryhistory)

Get them from the history package:
You import them from the React Router package:

```js
// JavaScript module import
import createBrowserHistory from 'history/lib/createBrowserHistory'
// or CommonJS
var createBrowserHistory = require('history/lib/createBrowserHistory')

const history = createBrowserHistory()
import { browserHistory } from 'react-router'
```

Then pass them into your `<Router>`:

```js
render(
<Router history={history} routes={routes} />,
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
)
```

### `createHashHistory`
This is the default history you'll get if you don't specify a history at all (i.e. `<Router>{/* your routes */}</Router>`). It uses the hash (`#`) portion of the URL creating routes that look like `example.com/#/some/path`.
### `hashHistory`
Hash history uses the hash (`#`) portion of the URL, creating routes that look like `example.com/#/some/path`.

#### Should I use `createHashHistory`?
Hash history is the default because it works without any setup on your server, and works in all evergreen browsers and IE8+. But, we don't recommend using it in production, every web app should aspire to use `createBrowserHistory`.
#### Should I use `hashHistory`?
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`.

#### What is that `?_k=ckuvup` junk in the URL?
When a history transitions around your app with `pushState` or `replaceState`, it can store "location state" on the new location that doesn't show up in the URL, think of it a little bit like post data in an HTML form.
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.

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.

You can disable that feature (more [here](http://rackt.org/history/stable/HashHistoryCaveats.html)):
```js
// Opt-out of persistent state, not recommended.
let history = createHashHistory({
queryKey: false
});
```

### `createBrowserHistory`
### `browserHistory`
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`.

#### Configuring Your Server
Expand Down Expand Up @@ -100,6 +88,12 @@ You might wonder why we don't fall back to hash history; the problem is that URL
### `createMemoryHistory`
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).

Its a bit different than the other two histories because you have to
create one, it is this way to facilitate testing:

```js
const history = createMemoryHistory(location)
```

## Example implementation

Expand All @@ -109,15 +103,15 @@ app, the client entry point would look like:
```js
import React from 'react'
import { render } from 'react-dom'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { Router, Route, IndexRoute } from 'react-router'
import { browserHistory, Router, Route, IndexRoute } from 'react-router'

import App from '../components/App'
import Home from '../components/Home'
import About from '../components/About'
import Features from '../components/Features'

render(
<Router history={createBrowserHistory()}>
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path='about' component={About} />
Expand Down

0 comments on commit 7390b65

Please sign in to comment.