title: Getting started with React Router
body: <p>I am trying to setup my react app. </p>
  
  <p>I am trying to understand how to integrate the routes with the app.</p>
  
  <p>When I try to use AppRouter in my ReactDOM, I get an error message that says I shouldn't use Route outside the Router.</p>
  
  <p>I don't understand what the error means. I can get rid of the error message when I remove the AppRouter line from my Provider, but that only creates a new error with the provider. I can't find an example of how to get started.</p>
  
  <p>My app.js has:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import { Provider } from 'react-redux';
  import AppRouter from './routers/AppRouter.js';
  import { BrowserRouter } from 'react-router-dom';
  import configureStore from './store/configureStore.js';
  // import { startSetUsers } from './actions/users';
  
  
  import 'normalize.css/normalize.css';
  import './styles/styles.scss';
  import './firebase/firebase';
  // import * as firebaseui from 'firebaseui'
  
  //import './playground/promises';
  
  
  const store = configureStore();
  
  const jsx = (
      &lt;Provider store={store}&gt;
          &lt;AppRouter /&gt;
      &lt;/Provider&gt;
  );
  
  ReactDOM.render(jsx, document.getElementById('app'));
  </code></pre>
  
  <p>My AppRouter has:</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { BrowserRouter, Route, Switch, Link, NavLink, withRouter } from 'react-router-dom';
  import Header from '../components/Header.js';
  import Footer from '../components/Footer.js';
  
  import Dashboard from '../components/home/Dashboard.js';
  import Landing from '../components/home/Landing.js';
  import ErrorNotice from '../components/ErrorNotice.js';
  import SignIn from '../components/auth/RegisterPage.js';
  import Pending from '../components/auth/PendingPage.js';
  import SignInSuccess from '../components/auth/SignInSuccess.js';
  
  
  import Users from '../components/users/UserDashboard.js';
  
  // this Higher Order Component wraps the app and listens for Firebase auth change state event
  // when this state changes, it updates the store
  import withAuthentication from '../hoc/withAuthentication';
  import AuthenticatedRoute from  '../components/auth/AuthenticatedRoute';
  
  const AppRouter = () =&gt; {
      return (
              &lt;div&gt;
                  &lt;Header /&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/" exact={true} component={Landing} /&gt;
                      {/* Authentication Related routes */}
                      &lt;Route path="/Signin" component={SignIn} /&gt;
                      {/* This route no longer required. Was used when uiConfig has a redirect URL */}
                      {/* &lt;Route path="/Loading" component={SignInSuccess} /&gt; */}
                      &lt;Route path="/Pending" component={Pending} /&gt;
                      {/* PUBLIC ROUTES */}
                      &lt;Route path="/Users" component={Users} /&gt;
                      &lt;Route path="/Menu" component={Menu} /&gt;
                      {/* AUTHENTICATED ROUTES */}
                      {/* Places routes that require authenitcation here and use the AuthenticatedRoute */}
                      &lt;AuthenticatedRoute path="/Dashboard" component={Dashboard} /&gt;
                      &lt;Route component={ErrorNotice} /&gt;
                  &lt;/Switch&gt;
                  &lt;Footer /&gt;
              &lt;/div&gt;
      )
  }
  
  
  
  // set up passing of store state as component props
  const mapStateToProps = state =&gt; ({
      authUser: state.sessionState.authUser,
  });
  
  // connect this component to the store
  // wrap withRouter to ensure that Links work: =&gt; https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates
  export default withRouter(connect(mapStateToProps)(AppRouter));
  </code></pre>
  
  <p>Can anyone see where I'm going wrong?</p>
  
  <p><strong>revised AppRouter.js</strong></p>
  
  <pre><code>import React from "react";
  import { connect } from "react-redux";
  import {
    BrowserRouter,
    Route,
    Switch,
    Link,
    NavLink,
    withRouter
  } from "react-router-dom";
  import Header from "../components/Header.js";
  import Footer from "../components/Footer.js";
  
  import Dashboard from "../components/home/Dashboard.js";
  import Landing from "../components/home/Landing.js";
  import ErrorNotice from "../components/ErrorNotice.js";
  import SignIn from "../components/auth/RegisterPage.js";
  import Pending from "../components/auth/PendingPage.js";
  import SignInSuccess from "../components/auth/SignInSuccess.js";
  
  import About from "../components/footerlinks/company/About.js";
  import Users from "../components/users/UserDashboard.js";
  
  // this Higher Order Component wraps the app and listens for Firebase auth change state event
  // when this state changes, it updates the store
  import withAuthentication from "../hoc/withAuthentication";
  import AuthenticatedRoute from "../components/auth/AuthenticatedRoute";
  
  const AppRouter = () =&gt; {
    &lt;BrowserRouter&gt;
      &lt;div&gt;
        &lt;Header /&gt;
        &lt;Switch&gt;
          &lt;Route path="/" exact={true} component={Landing} /&gt;
          {/* Authentication Related routes */}
          &lt;Route path="/Signin" component={SignIn} /&gt;
          {/* This route no longer required. Was used when uiConfig has a redirect URL */}
          {/* &lt;Route path="/Loading" component={SignInSuccess} /&gt; */}
          &lt;Route path="/Pending" component={Pending} /&gt;
          {/* PUBLIC ROUTES */}
          &lt;Route path="/About" component={About} /&gt;
          &lt;Route path="/Users" component={Users} /&gt;
          &lt;Route path="/Menu" component={Menu} /&gt;
          {/* AUTHENTICATED ROUTES */}
          {/* Places routes that require authenitcation here and use the AuthenticatedRoute */}
          &lt;AuthenticatedRoute path="/Dashboard" component={Dashboard} /&gt;
          &lt;Route component={ErrorNotice} /&gt;
        &lt;/Switch&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter&gt;;
  };
  
  // set up passing of store state as component props
  const mapStateToProps = state =&gt; ({
    authUser: state.sessionState.authUser
  });
  
  // connect this component to the store
  // wrap withRouter to ensure that Links work: =&gt; https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates
  export default connect(mapStateToProps)(AppRouter);
  </code></pre>
  
  <p><strong>console errors after removing withRouter from the import statement:</strong></p>
  
  <pre><code>Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
      in Route (created by AppRouter)
      in AppRouter (created by Connect(AppRouter))
      in Connect(AppRouter)
      in Provider
  
  Warning: AppRouter(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
  printWarning @ warning.js:33
  warning @ warning.js:57
  warnIfInvalidElement @ ReactCompositeComponent.js:51
  mountComponent @ ReactCompositeComponent.js:193
  mountComponent @ ReactReconciler.js:45
  performInitialMount @ ReactCompositeComponent.js:370
  mountComponent @ ReactCompositeComponent.js:257
  mountComponent @ ReactReconciler.js:45
  performInitialMount @ ReactCompositeComponent.js:370
  mountComponent @ ReactCompositeComponent.js:257
  mountComponent @ ReactReconciler.js:45
  performInitialMount @ ReactCompositeComponent.js:370
  mountComponent @ ReactCompositeComponent.js:257
  mountComponent @ ReactReconciler.js:45
  mountComponentIntoNode @ ReactMount.js:104
  perform @ Transaction.js:143
  batchedMountComponentIntoNode @ ReactMount.js:126
  perform @ Transaction.js:143
  batchedUpdates @ ReactDefaultBatchingStrategy.js:62
  batchedUpdates @ ReactUpdates.js:97
  _renderNewRootComponent @ ReactMount.js:319
  _renderSubtreeIntoContainer @ ReactMount.js:401
  render @ ReactMount.js:422
  (anonymous) @ app.js:29
  __webpack_require__ @ bootstrap 8dde10c53183363cc06e:19
  (anonymous) @ bundle.js:50261
  __webpack_require__ @ bootstrap 8dde10c53183363cc06e:19
  module.exports @ bootstrap 8dde10c53183363cc06e:62
  (anonymous) @ bootstrap 8dde10c53183363cc06e:62
  invariant.js:42 Uncaught Error: AppRouter(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object
  </code></pre>