React-router 4 authenticated routes

I’m using react-router with react-komposer. I followed the meteorchef here is my router file.

import React from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { composeWithTracker } from 'react-komposer';
import { Meteor } from 'meteor/meteor';
import Public from '../pages/Public';
import Authenticated from '../pages/Authenticated';
import AppNavigation from '../components/AppNavigation';
import Index from '../pages/Index';
import Posts from '../pages/Posts'
import Login from '../pages/Login';
import Signup from '../pages/Signup';
import NotFound from '../pages/NotFound';

const App = appProps => (
        <div className="App">
            <AppNavigation {...appProps}/>
            <Route exact name="index" path="/" component={Index}/>
            <Authenticated exact path="/posts" component={Posts} {...appProps}/>
            <Public path="/signup" component={Signup} {...appProps} />
            <Public path="/login" component={Login} {...appProps} />
            <Route component={NotFound} />

App.propTypes = {
    loggingIn: PropTypes.bool,
    authenticated: PropTypes.bool,

const composer = (props, onData) => {
    const loggingIn = Meteor.loggingIn();
    onData(null, {
        authenticated: !loggingIn && !!Meteor.userId(),

export default composeWithTracker(composer)(App);

When I run the project I get the error ( A <Router> may have only one child element)

It has two child elements. Close your app div after the switch component.


Thankyou that was the problem