[Solved]-How to click a button and navigate to a new route with URL params using React Router 4-Reactjs

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:

```JSX
<Route path="/map/:_id" render={({ match }) => (
<Map
params={match.params}
/>
)} />

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:

```JSX
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) {
        e.preventDefault();

        let history = props.history;
        Meteor.call('newMap', {'name': 'new map'}, (error, result) => {
            history.push(`/map/${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">
                <header>
                    <AccountsUIWrapper />
                    {newMap}
                    <nav>
                        <ul>
                            <li><Link to='/'>Home</Link></li>
                            <li><Link to='/about'>About</Link></li>
                        </ul>
                    </nav>
                </header>

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

                </main>
            </div>
        );
    }
}

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

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