Isomorphic Routing in React with react-engine

[00:00] Hey guys, in this video we are going to talk about creating isomorphic routes with React Engine. Now when we installed React Engine it actually came with React Router. So what we're going to do is first here in our public directory we're going to create a new file, we're going to call that routes.jsx. We're going to require React, and we're also going to require react router.

[00:26] We're also going to require our component that we created earlier called index, oh, not that guy. We're also going to require our index component which we created earlier. Now we're going to have a new component called app. So app = require use app.jsx so that doesn't exist yet, we're going to need to create that. We're going to have this variable here called route.

[01:03] Here we're going to create our first route, and in this one we're not going to require a path or name parameter, but we are going to have our handler, it's going to be app. This is going to act as our root component. Anything that happens in our application is going to go through our app component.

[01:21] So I'm going to create another one here, this one's going to be, the path is going to be just our route path, our name we'll call it home, and our handler is going to be our index component, we're actually going to use that for both of these guys. So this will be that. We're going to repurpose this guy, we're going to call it person, it's going to take in a parameter of id.

[01:46] So this parameter will get passed to this component index in its props, it will actually end up being this.props.params but it otherwise works exactly as we expect props to work. We're going to go in and export routes, now here in our use directory we're going to create our app component, so app.jsx. Here we're going to require react, we're also going to require react router and we're going to require our page component.

[02:20] Let's build up our app component, and here we're going to return our page component, that's going to inherit this.props, we're going to create router.routeHandler. So that's whatever handler was passed in to our app component will jump back and take a quick look at that, but this is also going to inherit this.props.

[02:49] We'll load and close that guy right there. So if we jump back to our routes what we can see is that routeHandler is going to be one of these two components, in this case it's actually index both times, but we could have some other components being passed in, so whatever route matched our path, our current path, the handler for that will get passed in to app.jsx and it will land right here. [03:19] While we're in here, this should actually be three dots. So we're going to repurpose index.jsx, we're going to go ahead and get rid of this click handler, and we're not going to need our page component any longer, because again that's just going to get wrapped up in our app component. In here all we're going to do is we're going to say this is person number this.props.params.id, so whatever the id is, that's what we're going to display there.

[03:51] To get this working on the client side, here in our index.js, we're going to require our route, and then here in our client boot options we're going to create a key called routes, and we're going to pass in our routes. I'll jump over here to the server, and the first thing we're going to do is right here where we're creating our engine, we're going to add a key called react routes and we're just going to point that to our routes.

[04:14] Now down here where we have our index, I'm going to go ahead and rename this handler rather than passing in a specific component, we're going to say rec.url so whatever our URL is, so let's go ahead and update these guys really quick, handler there, and handler here. This parameter is now going to be id, and up here our title is going to be "Person Number" + and we'll say, so if we don't have our id we'll say empty, otherwise it will be recs.params.id.

[04:51] Let's go ahead and save that, and finally we're going to jump over here to our page component and we're going to bring in react router, and here in our body right before we get to our this.props.children, we're going to drop in a <ul>, we're just going to create some links here.

[05:09] To do that I'm going to create an array, 10 digits, map that. We're going to return the link, or a list item, and the inner HTML with that is going to be this router.link component, it's going to link to our named route which was person, that's going to have this params attribute it's going to be interpolated, it's just going to be id is items, that's just the number that we're mapping through. C

[05:45] lose this here, and our content here will just be person number item. OK, I think we're looking pretty good, I'm going to go ahead and reload this guy in the browser. Ah, string is not a function in server, let's find that. Ah, we've got a plus symbol in the wrong spot here, and you know while we're in here we don't need this dot. Save that, jump to our root application, cool. So we're in the root application here, and I'm going to make this guy a little bit bigger.

[06:23] What I want to pay attention to here for just a second, is we landed on our root directory. The title of our page, let me zoom this in a bit, is person # empty, and that's fine, that's what we expect. When we cycle through our navigation, now we're on person seven, we can see that the title tag in our HTML has not been updated because we in fact using client-side routing.

[06:48] If we refresh here on person number seven, the server picks that up and we've got person number seven here in our title tag. If we jump over to nine, again the client-side routing has picked up. So in addition to that, what's really cool, I'm going to jump over here to settings, advanced settings, content settings, and disable JavaScript. So now JavaScript's not going to work.

[07:12] I'm going to go ahead and reload on person number seven. You can see we've got person number seven here in our title tag. When I jump to person number nine, we've got person number nine because the server-side routing is picked up where the client-side routing has been disabled. That is isomorphic routing in react engine.