Screencast Add a Router to a React Application JavaScript

  • Sergio Cruz
  • 4814 views

Comments

  1. Scott Williams said

    Shouldn't react router be saved from npm as a dependency rather than a dev dependency as it's needed in the build not just for dev.

  2. Faculty

    Sergio Cruz said

    Hi Scott, great question! I think the reason we took that route was because in order to transpile the code, we would still need all the dev dependencies. In a real production app, we would transpile our code beforehand in a Continuous Integration environment (like TravisCI or similar) and only push the already transpiled code to production. This is different from a backend-only nodejs application where the require() calls are actually happening in the production server. I hope this makes sense :)

  3. Martin Jezek said

    Hi Sergio and Carlos, I've just seen the whole React series and these additional videos. And I have to admit you guys have outdone it! I subscribed to Code School just because of the React and it was totally worthwhile. I'm moving from AngularJS to ReactJS and this course gave me a great overview. Thanks a lot and keep going :)) PS: Do you plan to make some videos about Flux and Redux or Immutable.js? That would be something.

  4. Satya said

    Hi Sergio, is there a way to remove those random characters coming after the page name in the address bar using hashHistory itself as you did in browserHistory.And it would be great if you can give some advance sessions on Flux as well.

  5. Faculty

    Sergio Cruz said

    Hi @Satya, hashHistory uses those characters at the end of the URL to keep track of what pages were visited. So as far as I know there is not a way around this. Not sure if they'll ever change this, but you should visit the project's documentation every now and then to check for changes. And thanks for the feedback, we're keeping the Flux in mind ;)

  6. jochie said

    Hi Sergio. Great video. I was wondering how one would handle the browserHistory way of routing, as I think that's a more user friendly implementation and probably also a little better for SEO.

    Would it be as simple as redirecting all urls to the / route serverside, like a soft redirect. Basically, load the same index.php (or something else) on /blog or /video as the one that is loaded on our homepage?

  7. morty91 said

    Hi guys, you had one error more in console this.state.comments.map is not a function. How did you solve it? Because I hit this error during the course power with react.

  8. nimrod Fridlin said

    Hi Sergio and Carlos, Thanks for the great stuff (es2015 - the shape of javasctipt to come, powering up with React and the additional videos) very helpful!!

    I keep on hearing about how great react + redux together is... is there a chance for a video about redux? a bonus will be react with redux of course :)

    Thanks again, keep up the good work.

  9. Patrick Ferreira said

    @morty91 you saw this error in console because of the apiUrl was not defined. As Sergio solve the api, the http request was successfully made, and the map can be applied to comments array ;)

  10. Neo said

    The video has the previous video's title... time: 00:21

  11. syafzal said

    const app = (
        <Router>
            <Route path="/" component={Layout} />
        </Router>
    );
    
    jQuery(function() {
        ReactDOM.render(
            app,
            document.getElementById('comment-box'),
            function () {
                console.timeEnd('react-app');
            }
        );
    });
    
  12. syafzal said

    At the start of the video, I'm getting this error - "Router.js:111Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined(…)"

    app.js is looking like this - const app = ( );

    jQuery(function() { ReactDOM.render( app, document.getElementById('comment-box'), function () { console.timeEnd('react-app'); } ); });

  13. syafzal said

    it worked on adding this to router history={hashHistory}

  14. synox said

    Hi every one,

    I have an issue about redirecting. I would like to redirect a user to the homepage when there is no matching routes found. I've tried severals possibilities that I found around the web, and still get a "Cannot GET /xxx" error instead of redirecting.

    If someone, has already struggled with this kind of issue, please help me :D

About This Screencast

In the last episode of our React series, we’ll build a single-page application using the React router and demonstrate how to link and navigate between different pages. Watch us build, and practice alongside us by downloading the source code below.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now