Accepted answer

After finding a typo in my original code ('/maps/' where the path should have been '/map/') I found another 'gotcha' which is this:

If the route expects a URL parameter, and it is not supplied, then the route doesn't seem to render at all. My route is defined as:

<Route path="/map/:_id" render={({ match }) => (
)} />

If you try to navigate to 'http://localhost:3000/map/' then the component doesn't render. If you put any value on the end e.g. 'http://localhost:3000/map/dummyvalue' it renders.

I've now got a tidier version working:

import React, { Component } from 'react';
import { withRouter, Switch, Route, Link } from 'react-router-dom';

import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

// Mongodb collection
import { Maps } from '../../api/maps/maps.js';

// User Accounts
import AccountsUIWrapper from '../AccountsUIWrapper.jsx';

import Home from '../pages/home';
import Map from '../pages/map';
import About from '../pages/about';

function NewMap(props) {
    function handleClick(e) {

        let history = props.history;'newMap', {'name': 'new map'}, (error, result) => {

    let disabled = 'disabled';
    if (Meteor.userId()) { disabled = '';}
    return (
        <button disabled={disabled} onClick={handleClick}>New Map</button>

class App extends Component {
    renderNewMap() {
        const history = this.props.history;
        return (
            <NewMap history={history}

    render() {
        let newMap = this.renderNewMap();

        return (
            <div className="primary-layout">
                    <AccountsUIWrapper />
                            <li><Link to='/'>Home</Link></li>
                            <li><Link to='/about'>About</Link></li>

                        <Route exact path='/' component={Home}/>
                        <Route path="/map/:_id" render={({ match }) => (
                        )} />
                        <Route path='/about' component={About}/>


export default withRouter(withTracker(() => {
    const mapsHandle = Meteor.subscribe('maps');

    return {
        'maps': Maps.find({}).fetch(),
        'loading': !mapsHandle.ready(),
        'currentUser': Meteor.user(),

Related Query

More Query from same tag