React Router setup

help
1

Hi,

I’m following this to setup react router. However, I am getting these errors:

Warning: Failed prop type: The prop history is marked as required in Router, but its value is undefined.
in Router

Uncaught TypeError: Cannot read property ‘location’ of undefined

I have added the following packages:

    "babel-runtime": "^6.20.0",
    "history": "^4.6.0",
    "meteor-node-stubs": "~0.2.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0"

routes.jsx

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import { Index } from '../../ui/components/index.jsx';

Meteor.startup( () => {
  render( 
    <Router history={ browserHistory }>
      <Route path="/" component={ Index } />
    </Router>, 
    document.getElementById( 'react-root' ) 
  );
});

Not sure what I’m doing wrong here…

2

I’m not sure what is going on either. Feels weird.

Here is a project I’m working on (it’s just a testing area)

And I use the following (successfully)

import { Meteor } from 'meteor/meteor'

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { Accounts, STATES } from 'meteor/std:accounts-ui';


import App from '../../ui/pages/app'

import MyEditor from '../../ui/layouts/editor'
import LogIn from '../../ui/layouts/login'

class Home extends Component {
  render () {
    return (
      <div>
        <MyEditor />
        <LogIn />
      </div>
    )
  }
}

const routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="/signin" component={() => <Accounts.ui.LoginForm />} />
      <Route path="/signup" component={() => <Accounts.ui.LoginForm formState={STATES.SIGN_UP} />} />
    </Route>
  </Router>
)

Meteor.startup(() => {
  ReactDOM.render(routes, document.querySelector('.draft-js-meteor-container'))
})

Feel free to clone the project and test it out in your environment.

git clone git@github.com:JeremyIglehart/DraftJSMeteor.git

From what I see, your code should work.

my project is using:

    "babel-runtime": "6.18.0",
    "bcrypt": "^1.0.2",
    "draft-js": "^0.9.1",
    "material-ui": "^0.16.7",
    "meteor-node-stubs": "~0.2.0",
    "react": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2",
    "react-tap-event-plugin": "^2.0.1"

I’m not sure what you’re using “history” for - you’re not even importing from it in your project?

The only thing that is weird to me is defining your routes not as a constant. Also, the fact that you’re defining them inside the meteor startup is “weird” to me, because it’s not my coding style, but it doesn’t look like it should matter. But, maybe give my pattern a try and see if it changes things?

1 Like
3

Howdy. Where is your routes.jsx file located/being loaded?

4

You are on the new react-router 4.X which isn’t compatible with this article. If you want to switch to react-router 4.X, you should use this package: https://atmospherejs.com/ssrwpo/ssr

2 Likes
5

the route.jsx file is in imports/startup/client which is imported by an index.js file at the same location.

This file is then imported by client/main.js:

> import '/imports/startup/client';

6

I think you’re right! I cloned @autoschematic project and update react router to version 4.0 and I get the same error:

Uncaught TypeError: Cannot read property 'location' of undefined

7

Okay, I figured it out.

React Router 4.0 is a completely different API.

I figured this out cause I started a new project related to my work and ran into this problem. I finally figured out the new implementation. I’ll upload a working project you can take a look at if you’d like.

I just got React Router 4.0 working. le sigh

Edit: Here is my project MaterialMeteor working with the new React Router 4.0 - Granted, this is not the only way to do it, this is just the way I chose to do it. Another option is to use their new <BrowserRouter />… But eh… I wanted to keep at least SOME of my React Router code looking the same - so I went this way. It’s working as far as I can tell. You’re welcome to check it out.

Edit 2: It is clear to me that 4.0 has a completely different API than 3.0. Here is the React Router 4.0 Web Documentation - an excellent document. I was able to figure everything out by looking at their examples.

8

Ah, yep @autoschematic is right. We’ll need to do a refactor of this tutorial once 4.0 is out.

2 Likes
9

So, apparently, RRv4 is already out. They have great documentation.

I was disappointed that I couldn’t find a well written short document that says “Okay, so you’re used to RRv3, here is what you need to know to switch to RRv4” - and the reason probably for this is… Well React Router v4 is totally different but well worth the <Switch /> (That’s a pun).

I’m planning a refactor for a project I’ve been working on for more than a year now.

I did find this EggHead course which I think is worth the time if you want to know how RRv4 works. I know the course is probably free for the next week, after that, I don’t think you have any guarentees.

Shout out to @themeteorchef - I love your tutorials so much! Seriously, if you had a React Router from 3.0 to 4.0 guide, I would have started there.

Best of luck to everyone. Check out RRv4, it’s AMAZING!

2 Likes