|
| 1 | +To illustrate the problems React Router is going to solve for you, let’s build a |
| 2 | +small application without it. |
| 3 | + |
| 4 | +Without React Router |
| 5 | +-------------------- |
| 6 | + |
| 7 | +```js |
| 8 | +var About = React.createClass({ |
| 9 | + render: function () { |
| 10 | + return <h2>About</h2>; |
| 11 | + } |
| 12 | +}); |
| 13 | + |
| 14 | +var Inbox = React.createClass({ |
| 15 | + render: function () { |
| 16 | + return <h2>Inbox</h2>; |
| 17 | + } |
| 18 | +}); |
| 19 | + |
| 20 | +var Home = React.createClass({ |
| 21 | + render: function () { |
| 22 | + return <h2>Home</h2>; |
| 23 | + } |
| 24 | +}); |
| 25 | + |
| 26 | +var App = React.createClass({ |
| 27 | + render () { |
| 28 | + var Child; |
| 29 | + switch (this.props.route) { |
| 30 | + case 'about': Child = About; break; |
| 31 | + case 'inbox': Child = Inbox; break; |
| 32 | + default: Child = Home; |
| 33 | + } |
| 34 | + |
| 35 | + return ( |
| 36 | + <div> |
| 37 | + <h1>App</h1> |
| 38 | + <Child/> |
| 39 | + </div> |
| 40 | + ) |
| 41 | + } |
| 42 | +}); |
| 43 | + |
| 44 | +function render () { |
| 45 | + var route = window.location.hash.substr(1); |
| 46 | + React.render(<App route={route} />, document.body); |
| 47 | +} |
| 48 | + |
| 49 | +window.addEventListener('hashchange', render); |
| 50 | +render(); // render initially |
| 51 | +``` |
| 52 | + |
| 53 | +As the hash portion of the URL changes, `App` will render a different |
| 54 | +`<Child/>` by branching on `this.props.route`. Pretty straightforward |
| 55 | +stuff. But it gets complicated fast. |
| 56 | + |
| 57 | +Imagine now that `Inbox` has some nested UI at a path like |
| 58 | +`inbox/messages/:id` and `inbox/unread`, etc. We'll need to make our url |
| 59 | +parsing much more intelligent to be able to pass the right information |
| 60 | +to `App`, and then to `Inbox` in order for it to know which URL-mapped |
| 61 | +child component it should render. We'd then have a branch of components |
| 62 | +that should be rendered at any given URL. Add a few more of these |
| 63 | +branches and we'll end up with a lot of code to keep the URL and our |
| 64 | +application's component hierarchy in sync. |
| 65 | + |
| 66 | +With React Router |
| 67 | +----------------- |
| 68 | + |
| 69 | +Nested URLs and nested component hierarchy are at the heart of React |
| 70 | +Router. Lets make our routing for our little app declarative. We use JSX |
| 71 | +for route configuration because we want to define a view hierarchy with |
| 72 | +properties, so its a pefect fit. |
| 73 | + |
| 74 | +```js |
| 75 | +var Router = require('react-router'); |
| 76 | +var Route = Router.Route; |
| 77 | + |
| 78 | +// declare our routes and their hierarchy |
| 79 | +var routes = ( |
| 80 | + <Route handler={App}> |
| 81 | + <Route path="about" handler={About}/> |
| 82 | + <Route path="inbox" handler={Inbox}/> |
| 83 | + </Route> |
| 84 | +); |
| 85 | +``` |
| 86 | + |
| 87 | +Next we need to delete some code from `App`. We'll replace `<Child/>` |
| 88 | +with `<RouteHandler/>` that functions as the old `switch` block from |
| 89 | +before. |
| 90 | + |
| 91 | +```js |
| 92 | +var RouteHandler = Router.RouteHandler; |
| 93 | + |
| 94 | +var App = React.createClass({ |
| 95 | + render () { |
| 96 | + return ( |
| 97 | + <div> |
| 98 | + <h1>App</h1> |
| 99 | + <RouteHandler/> |
| 100 | + </div> |
| 101 | + ) |
| 102 | + } |
| 103 | +}); |
| 104 | +``` |
| 105 | + |
| 106 | +Finally we need to listen to the url and render the application. |
| 107 | + |
| 108 | +```js |
| 109 | +Router.run(routes, Router.HashLocation, (Root) => { |
| 110 | + React.render(<Root/>, document.body); |
| 111 | +}); |
| 112 | +``` |
| 113 | + |
| 114 | +`Root` is a component that bakes in the matched component hierarchy |
| 115 | +making `RouteHandler` know what to render. |
| 116 | + |
| 117 | +Note that `<Route/>` components are not ever rendered, they are just |
| 118 | +configuration objects that the router uses to create an internal tree of |
| 119 | +routes. |
| 120 | + |
| 121 | +Adding more UI |
| 122 | +-------------- |
| 123 | + |
| 124 | +Alright, now we're ready to nest the inbox messages inside the inbox UI. |
| 125 | +First we'll make a new `Message` component and then we'll add the route |
| 126 | +under `inbox` so that the UI will nest. |
| 127 | + |
| 128 | +```js |
| 129 | +var Message = React.createClass({ |
| 130 | + render () { |
| 131 | + return <h3>Message</h3>; |
| 132 | + } |
| 133 | +}); |
| 134 | + |
| 135 | +var routes = ( |
| 136 | + <Route handler={App}> |
| 137 | + <Route path="about" handler={About}/> |
| 138 | + <Route path="inbox" handler={Inbox}> |
| 139 | + <Route path="messages/:id" handler={Message}/> |
| 140 | + </Route> |
| 141 | + </Route> |
| 142 | +); |
| 143 | +``` |
| 144 | + |
| 145 | +Now visits to urls like `inbox/messages/Jkei3c32` will match the new |
| 146 | +route and nest the UI branch of `App -> Inbox -> Message`. |
| 147 | + |
| 148 | +Getting the url parameters |
| 149 | +-------------------------- |
| 150 | + |
| 151 | +We're going to need to know something about the message in order to |
| 152 | +fetch it from the server. We call the component you hand to a `<Route/>` |
| 153 | +a `RouteHandler`. `RouteHandler` instances get some useful properties |
| 154 | +injected into them when you render, particularly the parameters from the |
| 155 | +dynamic segment of your path. In our case, `:id`. |
| 156 | + |
| 157 | +```js |
| 158 | +var Message = React.createClass({ |
| 159 | + componentDidMount: function () { |
| 160 | + // from the path `/inbox/messages/:id` |
| 161 | + var id = this.props.params.id; |
| 162 | + fetchMessage(id, function (err, message) { |
| 163 | + this.setState({ message: message }); |
| 164 | + }) |
| 165 | + }, |
| 166 | + // ... |
| 167 | +}); |
| 168 | +``` |
| 169 | + |
| 170 | +Nested UI and Nested URLs need not be coupled |
| 171 | +--------------------------------------------- |
| 172 | + |
| 173 | +With React Router, you don't need to nest your UI in order to get a |
| 174 | +nested URL. Inversely, to get nested UI, you don't need to have nested |
| 175 | +URLs either. |
| 176 | + |
| 177 | +Lets make a new url at `/about/company`, but without nesting the UI |
| 178 | +inside of the `About` component. |
| 179 | + |
| 180 | +```js |
| 181 | +var routes = ( |
| 182 | + <Route handler={App}> |
| 183 | + <Route path="about" handler={About}/> |
| 184 | + <Route path="about/company" handler={Company}/> |
| 185 | + </Route> |
| 186 | +); |
| 187 | +``` |
| 188 | + |
| 189 | +Though our url is nested, the UI of `About` and `Company` are siblings. |
| 190 | + |
| 191 | +Now lets go the other way and add the url `/archive/messages/:id` and |
| 192 | +have it nested under our inbox UI even though the URL is not nested. We |
| 193 | +have to do three things for this to work: |
| 194 | + |
| 195 | +1. Start the path with `/` to signal that its an absolute path. This |
| 196 | + won’t “inherit” the parent path the way `inbox/messages/:id` gets |
| 197 | + inherited. |
| 198 | +2. Nest the `<Route/>` under the `inbox` route to cause the UI to nest. |
| 199 | +3. Ensure you have all the necessary dynamic segments, we only have |
| 200 | + `:id` so its pretty easy. |
| 201 | + |
| 202 | +```js |
| 203 | +var routes = ( |
| 204 | + <Route handler={App}> |
| 205 | + <Route path="inbox" handler={Inbox}> |
| 206 | + <Route path="messages/:id" handler={Message}/> |
| 207 | + <Route path="/archive/messages/:id" handler={Message}/> |
| 208 | + </Route> |
| 209 | + </Route> |
| 210 | +); |
| 211 | +``` |
| 212 | + |
| 213 | +That's the gist of React Router. Application UIs are boxes inside of |
| 214 | +boxes inside of boxes; now you can keep those boxes in sync with the |
| 215 | +URL. |
| 216 | + |
0 commit comments