Newbie react-router question - How to use it!

help
1

Hello. I’m new to web development. I’ve been learning Javascript, Meteor, React, MongoDB, and various other small components. (Steep learning curve!) I’ve worked my way through many tutorials and I am doing pretty well, but I am stumped on routing.

I understood the routing examples given in meteortips.com Your Second Meteor Application using Iron Router/Blaze and I am trying to rewrite this in my Meteor-React application using react-router.

I’ve installed the reactrouter:react-router package (v1.0.3 — updated that today) and tried to follow the supplied examples. Nothing I do seems to make it work correctly, so I’m finally turning to the community for help. I have two basic questions:

  1. Is there anything I need to do besides type meteor add reactrouter:react-router to make this active? If so, what?
  2. Are there any good complete examples that I can reference?

Because I’m new to this it’s difficult to follow most of the examples/tutorials since I don’t fully understand all of the pieces yet. A good complete example will go a long way for me. I truly appreciate any help you can provide.

Ken

2

This is a good basic example of react router usage:

3

I’m new to Meteor, but from the research and testing I’ve done, my advice would be to not use React Router and to instead use Flow Router. Check out their SSR (server-side rendering) branch on GitHub for the latest and greatest. There’s a complete guide that I think puts it together with React very clearly here: https://kadira.io/academy/meteor-routing-guide

4

@tedavery I was trying to select between those which one to use. I almost have React Router working now (almost!) but I am curious why you make this recommendation. What is the advantage of using Flow Router? Is there anything I give up? I chose React Router because the name implies that it plays nicely with React, but that’s perhaps not the best reason. :wink:

@tyusupov Thanks for the recommendation. I have started following this but have not had time to finish yet. While my previous errors have gone away, I have new ones to figure out now. I did originally find and try to follow the original post from Alex Garibay (which explains why it was not working for me!)

Thanks.

5

The error I am currently receiving is:

Uncaught ReferenceError: Link is not defined

The code that it trips on is in a file Index.jsx at the root layer of the project (but it also does not work when in the client folder)

(This code was retyped because I’m working on a different computer now and cannot put the other one on the network) Also, how do I type code here to include the indents? The preformatted text option only changes the font…

`Index = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
return (

This is the index route.

Show me your foo.
); } });`

Then I have a file called Routes.jsx in a client folder:

const { Router, Route, IndexRoute, Link, history } = ReactRouter;

const browserHistory = history.createHistory();

Routes = React.createClass({ getInitialState: function() { return {}; }, render: function() { return ( <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="foo" component={Foo}/> </Route> </Router> ); } });

6

I finally solved it! Thanks for the help.

I examined the meteor-react-demo-master sample app referenced in the article. I noticed that he declared:

const {…, Link, …} = ReactRouter;

in more than one file. I think this was a Javascript (and/or Meteor) gotcha for me. I thought that if the constant was declared outside of a function, then it would be global in scope. This is why I did not declare it again in Index.jsx. As soon as I did that, it all started working.

Can someone please explain the mistake I made with regard to variable scope? I am reading Javascript, the Definitive Guide from O’Reilly but I clearly misunderstood something. Unless this is a Meteor thing — My understanding is that I can spread all of my code into multiple files. So how does scope relate to organizing my code in multiple files in Meteor?

Thanks again!

Ken

1 Like
7

This is a Meteor thing. Basically, you need to understand the differences between Global Scope, File Scope and Package Scope.

Putting packages to one side for the moment, Meteor wraps each js file in a closure, so that for example:

const thing = 'apple';
otherThing = 'orange';

becomes:

(function() {
  const thing = 'apple';
  otherThing = 'orange';
})();

In that example, thing has File Scope - it’s only available within that js file. Hovever, the variable otherThing, has Global Scope - it’s available throughout the app.

Within a package, Global Scope becomes Package Scope (only available within the package code), unless the package.js file explicitly exports it - in which case it becomes Global Scope.

Not sure whether that clarifies or confuses :wink: - check out the docs on namespacing and structuring your app. In the latter, note the section on client/compatibility:

This folder is for compatibility JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.

Where ‘variable scope’ == ‘file scope’.

1 Like
8

Thank you, that explanation was very helpful!

1 Like