Meteor react router rendering nothing

Question

I'm following this guide Meteor React Routing but unfortunately, my app now renders nothing (after adding routing, the app was working fine before-hand), and I can't see anything wrong

App.jsx

import React, { Component } from 'react';
import Navigation from './components/Navigation';
import LoginForm from './components/LoginForm';

export default class App extends Component {
    render() {
      return (
            <div>
                <Navigation />
                <p>
                    <h1>Something here</h1>
                </p>
        </div>
      );
    }
}

main.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import { renderRoutes } from './Routes.jsx';

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById('app'));
});

Routes.jsx

import React from 'react';
import { render } from 'react-dom';
import { Router, Route } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';

import App from '../imports/ui/App.jsx';
import LoginForm from '../imports/ui/components/LoginForm.jsx';

const browserHistory = createBrowserHistory();

export const renderRoutes = () => (
    <Router history={browserHistory}>
        <Route exact path="/" component={App} />
        <Route path="/login" component={LoginForm} />
    </Router>
);

..and the html

<head>
  <title>Some title</title>
</head>

<body>
  <div id="app"></div>
</body>

I've verified that all imports resolve. And when running meteor, there are no errors. Nor are there any errors in the console of the browser, yet there is just a blank page. Have I missed something?

bennygenel · Accepted Answer · 2017-10-09 21:06:00Z

1

You are not returning your routes.

It should be like below,

export const renderRoutes = () => (
    <Router history={browserHistory}>
        <Route exact path="/" component={App} />
        <Route path="/login" component={LoginForm} />
    </Router>
);

// or

export const renderRoutes = () => {
   return (
     <Router history={browserHistory}>
       <Route exact path="/" component={App} />
       <Route path="/login" component={LoginForm} />
    </Router>
   );
};

answered Oct 9, 2017 at 21:06

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NoGall Over a year ago

Thanks for spotting that, unfortunately even that change only renders blank pages also :(

bennygenel Over a year ago

@LokiSinclair can you try changing render(renderRoutes(), document.getElementById('app')); to render(renderRoutes, document.getElementById('app'));

NoGall Over a year ago

That results in: "Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it." - Outputted to the console.

NoGall · Accepted Answer · 2017-10-10 12:23:38Z

1

Unfortunately there was an error that wasn't being thrown in Meteor. There was an issue with my Router definition, what it should actually be is:

export const renderRoutes = () => (
    <Router history={browserHistory}>
        <div>
            <Route exact path="/" component={App} />
            <Route path="/login" component={LoginForm} />
        </div>
    </Router>
);

Notice the inclusion of div - as it would appear that Router can only have one child element.

answered Oct 10, 2017 at 12:23

NoGall

5,2366 gold badges42 silver badges72 bronze badges

Collectives™ on Stack Overflow

Meteor react router rendering nothing

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related