|
| 1 | +[](https://www.npmjs.org/package/react-router) |
| 2 | +[](https://travis-ci.org/rackt/react-router) |
| 3 | +[](https://david-dm.org/rackt/react-router) |
| 4 | + |
| 5 | +React Router |
| 6 | +============ |
| 7 | + |
| 8 | +A complete routing library for React. |
| 9 | + |
| 10 | +Docs |
| 11 | +---- |
| 12 | + |
| 13 | +- [Guide: Overview](/docs/guides/overview.md) |
| 14 | +- [API](/docs/api/) |
| 15 | + |
| 16 | +Important Notes |
| 17 | +--------------- |
| 18 | + |
| 19 | +### SemVer |
| 20 | + |
| 21 | +Before our `1.0` release, breaking API changes will cause a bump to |
| 22 | +`0.x`. For example, `0.4.1` and `0.4.8` will have the same API, but |
| 23 | +`0.5.0` will have breaking changes. |
| 24 | + |
| 25 | +Please refer to the [upgrade guide](/UPGRADE_GUIDE.md) and |
| 26 | +[changelog](/CHANGELOG.md) when upgrading. |
| 27 | + |
| 28 | +Installation |
| 29 | +------------ |
| 30 | + |
| 31 | +```sh |
| 32 | +npm install react-router |
| 33 | +# or |
| 34 | +bower install react-router |
| 35 | +``` |
| 36 | + |
| 37 | +This library is written with CommonJS modules. If you are using |
| 38 | +browserify, webpack, or similar, you can consume it like anything else |
| 39 | +installed from npm. |
| 40 | + |
| 41 | +There is also a global build available on bower, find the library on |
| 42 | +`window.ReactRouter`. |
| 43 | + |
| 44 | +The library is also available on the popular CDN [cdnjs](https://cdnjs.com/libraries/react-router). |
| 45 | + |
| 46 | +Features |
| 47 | +-------- |
| 48 | + |
| 49 | +- Nested views mapped to nested routes |
| 50 | +- Modular construction of route hierarchy |
| 51 | +- Sync and async transition hooks |
| 52 | +- Transition abort / redirect / retry |
| 53 | +- Dynamic segments |
| 54 | +- Query parameters |
| 55 | +- Links with automatic `.active` class when their route is active |
| 56 | +- Multiple root routes |
| 57 | +- Hash or HTML5 history (with fallback) URLs |
| 58 | +- Declarative Redirect routes |
| 59 | +- Declarative NotFound routes |
| 60 | +- Browser scroll behavior with transitions |
| 61 | + |
| 62 | +Check out the `examples` directory to see how simple previously complex UI |
| 63 | +and workflows are to create. |
| 64 | + |
| 65 | +What's it look like? |
| 66 | +-------------------- |
| 67 | + |
| 68 | +```js |
| 69 | +var routes = ( |
| 70 | + <Route handler={App} path="/"> |
| 71 | + <DefaultRoute handler={Home} /> |
| 72 | + <Route name="about" handler={About} /> |
| 73 | + <Route name="users" handler={Users}> |
| 74 | + <Route name="recent-users" path="recent" handler={RecentUsers} /> |
| 75 | + <Route name="user" path="/user/:userId" handler={User} /> |
| 76 | + <NotFoundRoute handler={UserRouteNotFound}/> |
| 77 | + </Route> |
| 78 | + <NotFoundRoute handler={NotFound}/> |
| 79 | + <Redirect from="company" to="about" /> |
| 80 | + </Route> |
| 81 | +); |
| 82 | + |
| 83 | +Router.run(routes, function (Handler) { |
| 84 | + React.render(<Handler/>, document.body); |
| 85 | +}); |
| 86 | + |
| 87 | +// Or, if you'd like to use the HTML5 history API for cleaner URLs: |
| 88 | + |
| 89 | +Router.run(routes, Router.HistoryLocation, function (Handler) { |
| 90 | + React.render(<Handler/>, document.body); |
| 91 | +}); |
| 92 | +``` |
| 93 | + |
| 94 | +See more in the [overview guide](/docs/guides/overview.md). |
| 95 | + |
| 96 | +Benefits of this Approach |
| 97 | +------------------------- |
| 98 | + |
| 99 | +1. **Incredible screen-creation productivity** - There is only one |
| 100 | + use-case when a user visits a route: render something. Every user |
| 101 | + interface has layers (or nesting) whether it's a simple navbar or |
| 102 | + multiple levels of master-detail. Coupling nested routes to these |
| 103 | + nested views gets rid of a ton of work for the developer to wire all |
| 104 | + of it together when the user switches routes. Adding new screens |
| 105 | + could not get faster. |
| 106 | + |
| 107 | +2. **Immediate understanding of application structure** - When routes |
| 108 | + are declared in one place, developers can easily construct a mental |
| 109 | + image of the application. It's essentially a sitemap. There's not a |
| 110 | + better way to get so much information about your app this quickly. |
| 111 | + |
| 112 | +3. **Code tractability** - When a developer gets a ticket to fix a bug |
| 113 | + at as specific url they simply 1) look at the route config, then 2) |
| 114 | + go find the handler for that route. Every entry point into your |
| 115 | + application is represented by these routes. |
| 116 | + |
| 117 | +4. **URLs are your first thought, not an after-thought** - With React |
| 118 | + Router, you don't get UI on the page without configuring a url first. |
| 119 | + Fortunately, it's wildly productive this way, too. |
| 120 | + |
| 121 | +Related Modules |
| 122 | +--------------- |
| 123 | + |
| 124 | +- [rnr-constrained-route](https://github.com/bjyoungblood/rnr-constrained-route) - validate paths |
| 125 | + and parameters on route handlers. |
| 126 | +- [react-router-bootstrap](https://github.com/mtscout6/react-router-bootstrap) - Integration with [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) components. |
| 127 | + |
| 128 | +Contributing |
| 129 | +------------ |
| 130 | + |
| 131 | +Please see [CONTRIBUTING](CONTRIBUTING.md) |
| 132 | + |
| 133 | +Thanks, Ember |
| 134 | +------------- |
| 135 | + |
| 136 | +This library is highly inspired by the Ember.js routing API. In general, |
| 137 | +it's a translation of the Ember router api to React. Huge thanks to the |
| 138 | +Ember team for solving the hardest part already. |
| 139 | + |
0 commit comments