React-router 4 authenticated routes

help
1

I’m using react-router with react-komposer. I followed the meteorchef https://themeteorchef.com/tutorials/getting-started-with-react-router-v4. 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 => (
    <Router>
        <div className="App">
            <AppNavigation {...appProps}/>
        </div>
        <Switch>
            <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} />
        </Switch>
    </Router>
);

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

const composer = (props, onData) => {
    const loggingIn = Meteor.loggingIn();
    onData(null, {
        loggingIn,
        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)

2

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

3 Likes
3

Thankyou that was the problem