I am building a web app on Meteor and trying to implement routing using React-Router v4. I set up a basic routing structure following React-Router V4 documentation to the best of my understanding, however, no pages of my app render.
The console does not throw any errors when I run my app; however nothing renders, not even the landing page, which would otherwise render if there was no routing implemented. For some reason, therefore, my routing code is causing the app to render a blank page, despite App.js not being empty. Furthermore, as a test, if I type in an arbitrary route (i.e. ‘localhost:3000/randomroute’), I am not thrown an error saying that it is not a valid route. Nothing happens in the console.
Below are the relevant code snippets.
routes.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, BrowserRouter} from 'react-router-dom';
import { render } from 'react-dom';
import { App } from './App.js';
Meteor.startup(() => {
ReactDOM.render(
<BrowserRouter>
<Route exact path="/" component={App}/>
</BrowserRouter>,
document.getElementById('render-target')
);
});
main.js
import React, { Component } from 'react';
import {Meteor} from 'meteor/meteor';
import { render } from 'react-dom';
import '../imports/client/routes';
main.html
<head>
<title>React Meteor Voting</title>
</head>
<body>
<div id="render-target">
</div>
</body>
App.js
import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import Item from '../client/Item';
import AccountsUIWrapper from '../ui/AccountsUIWrapper.js';
import Items from '../api/Items';
class App extends Component {
addItems(event) {
event.preventDefault();
const itemOne = this.refs.itemOne.value.trim();
const itemTwo = this.refs.itemTwo.value.trim();
if (itemOne != '' && itemTwo != '') {
Meteor.call('insertNewItem', itemOne, itemTwo, (err, res) => {
if (!err) {
this.refs.itemOne.value = '';
this.refs.itemTwo.value = '';
}
});
this.refs.itemOne.value = '';
this.refs.itemTwo.value = '';
}
}
showAll() {
if(this.props.showAll) {
Session.set('showAll', false);
} else {
Session.set('showAll', true);
}
}
render() {
if (!this.props.ready) {
return <div>Loading</div>
}
return (
<div>
<header>
<h1>Level Up Voting</h1>
<AccountsUIWrapper />
<button onClick={this.showAll.bind(this)}>
Show {this.props.showAll ? 'One' : 'All'}</button>
</header>
<main>
<form className='new-items' onSubmit={this.addItems.bind(this)}>
<input type='text' ref='itemOne' />
<input type='text' ref='itemTwo'/>
<button type='submit'> Add Items </button>
</form>
{this.props.items.map((item) => {
return <Item item={item} key={item._id}/>
} )}
</main>
</div>
);
}
}
export default createContainer(() => {
let itemsSub = Meteor.subscribe('allItems');
let showAll = Session.get('showAll');
return{ showAll,
ready: itemsSub.ready(),
items: Items.find({}, {
limit: showAll ? 50 : 1,
sort: { lastUpdated: 1}
}).fetch()
}
}, App);
Package.json
{
"name": "votingAppReact",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"babel-runtime": "^6.26.0",
"bcrypt": "^1.0.3",
"classnames": "^2.2.5",
"history": "^4.7.2",
"meteor-node-stubs": "^0.3.2",
"react": "^16.2.0",
"react-addons-pure-render-mixin": "^15.6.2",
"react-dom": "^16.2.0",
"react-komposer": "^2.0.0",
"react-router": "^4.2.0",
"react-router-3": "^3.2.2",
"react-router-dom": "^4.2.2"
}
}
Any help is appreciated, please let me know if you would like additional information!
Unfortunately the routing still works for me based on the snippet you provided.