React Router and a react app what a pain in the butt

1

OK, so about 4 hours later, I can’t seem to get the react router to work correctly, I have a shell app component that looks like this, basically all day I’ve tried to monkey around with this to get a basic shell app have a route as landing page, and terms, and privacy render different views. But I can’t seem to get this setup to work correctly. This is such a struggle, because there’s the es6 way and the meteor way and figuring out the nuances of the framework and the libraries really slows me down, especially when I just want to wrap my content… I’ll keep hacking at this in hopes somebody has solved a similar problem

App = React.createClass(
  mixins: [ ReactMeteorData ]
  getMeteorData: -> currentUser: Meteor.user()
  render: -> <div>{this.props.children}</div>)

I have a router that looks like this: (JSX code formatting not supported)
routes = Router
Route path="/" component={App}>
ndexRoute component={Landing}/>
Route path=“terms” component={Terms} />
Route path=“privacy” component={Terms} />
Route>
Router>

And I get errors like this:

should be a string (for DOM elements) or a ReactClass (for composite components).warning @ react-runtime-dev.js:1697
Uncaught TypeError: Cannot read property ‘defaultProps’ of undefined

The documentation seems to be out of date for React Router react router uses components now, and react meteor only seems to support handlers, https://react-in-meteor.readthedocs.org/en/latest/routing/

By the way this code formatter tool needs an update…

2

How do people use any other data source in React Router? Presumably it’s through some sort of wrapper components? Seems like the Meteor thing should work fine, but I’ll admit it’s a bit hard to stay up to date with the ReactRouter API changes, which seem to be quite frequent.

3

Yeah, that’s the problem, react moves so fast and i couldn’t be after more simple use case.

4

You could also use Flow Router - personally I’m much more on board with the idea of the router as just another client-side store, rather than the thing in control of all app layout and data loading. React Router just seems to do too much under the hood for my taste.

2 Likes
5

Right, but i’m just trying to port over code, and I can’t really get my app to work as it was designed. This integration is hard for me to deal with.

6

The redux people seem to have a nice example app. Here’s one of their page components: https://github.com/rackt/redux/blob/master/examples/real-world/containers/RepoPage.js

Looks like you can just use ReactMeteorData instead of their loadData function, and all will be well!

7

Speaking of Redux and React Router, it’s nice that they have adopted the same convention of having “Page” components, just like we do for the Meteor Guide:

https://github.com/meteor/todos/tree/master/imports/client/pages

10

Let’s talk why don’t you try about some way to implement a version of your router and send a PR to react router or flow router.

That’s how we develop. Don’t waste your and our time putting issues like this.

11

Hey thanks for that comment. By the way I am a new customer of Kadira. I’m falling back to Iron Router… since i can get my react views to work in blaze templates.

Sorry, it’s a waste of your time, but it’s very frustrating when I follow documentation very closely and don’t get things to work, especially since React is suppose to have great integration with Meteor. In some ways yes and in some ways no.

12

not quite sure it will help, but the way work with me in meteor 1.3 Alpha is not using the react from meteor(or you will have to use browserify like the doc) and i did the following
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Provider } from ‘react-redux’;
const routeConfig = [
{ path: ‘/app’,
component: AppContainer,
childRoutes: [
RegisterRoute, //append child routes of each feature in here
LoginRoute
]
}
]

Meteor.startup(function () {
injectTapEventPlugin();
ReactDOM.render(
-Provider store={store}-
-Router history={history} routes={routeConfig} /-
-/Provider-,
document.getElementById(‘root’)
);
})

13

Cool. I just had the time to get to upgrade to Meteor 1.2 last week, so I’ll move to 1.3 as soon as it’s released. I can work around this for a bit. I really like the react router combined with the react component model.

Thanks

14

Do you have a repo that could be cloned? I’m working on an app now that is using react router and it works great and I’m especially enjoying the fact that SSR is so effortless!

1 Like
15

I’ll try to work it up, i deleted that code because nested routes weren’t working so I moved on. Do you have any examples of it all working?