title: How to use React Router with Preact
body: <p>I'm using Preact as my View framework <em>(can <strong>NOT</strong> use React due to the Facebook IP problems)</em>.  I needed to use React Router for the location routing because it has more flexibility than the Preact Router that the same team built.</p>
  
  <p>I managed to get React Router to accept Preact in place of React, however, I can't get it to match locations.  I'm not sure if it's a compatibility problem, or a configuration problem.  I've tried using just one pair of routes ( App and Account ) and it still doesn't work with that simplified setup.</p>
  
  <p><strong>Q:</strong> Does anyone see if I'm doing something wrong here?</p>
  
  <p>The error I get is: <code>Location "/account/12345/" did not match any routes</code></p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import { h, render } from 'preact';
  import { Router, browserHistory } from 'react-router';
  import { Provider } from 'react-redux';
  
  import createStore from './createStore';
  import createRoutes from './createRoutes';
  
  process.env.DEBUG &amp;&amp; console.log('Hello, developer!');
  
  const history = browserHistory;
  const store = createStore( history );
  const routes = createRoutes( store );
  
  render((
      &lt;Provider store={ store } key="redux-provider"&gt;
          &lt;Router history={ history } createElement={ h } routes={ routes } /&gt;
      &lt;/Provider&gt;
  ), document.body );
  </code></pre>
  
  <p><strong>createRoutes.js</strong></p>
  
  <pre><code>import { h } from 'preact';
  import { IndexRoute, Route } from 'react-router';
  
  // App Component
  import App from './components/app';
  
  // Sub Components
  import Account from './components/account';
  import Conversation from './components/conversation';
  import Dashboard from './components/dashboard';
  
  // Error Components
  import BadAccount from './components/bad-account';
  import NotFound from './components/not-found';
  
  // Routes
  export default ()=&gt; (
      &lt;Route path="/" component={App}&gt;
          {/* Get URL parameter */}
          &lt;Route path="account/:accountID" component={Account}&gt;
              {/* Index Route */}
              &lt;IndexRoute component={Dashboard} /&gt;
              {/* Sub Routes ( Alphabetical Please ) */}
              &lt;Route path="chat" component={Conversation} /&gt;
              {/* Catch-All Route */}
              &lt;Route path="*" component={NotFound} /&gt;
          &lt;/Route&gt;
          {/* Handle Invalid URIs */}
          &lt;Route path="*" component={BadAccount} /&gt;
      &lt;/Route&gt;
  );
  </code></pre>
  
  <p><strong>createStore.js</strong></p>
  
  
  
  <pre><code>import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
  import thunk from 'redux-thunk';
  import { routerMiddleware } from 'react-router-redux';
  
  import messages from './resources/messages/reducer';
  import conversation from './resources/conversation/reducer';
  import layout from './resources/layout/reducer';
  import profile from './resources/profile/reducer';
  import contract from './resources/contract/reducer';
  
  /*const { devToolsExtension } = window;*/
  
  export default history =&gt; {
  
      // Sync dispatched route actions to the history
      const reduxRouterMiddleware = routerMiddleware( history );
  
      // Create single reducer from all modules
      const rootReducer = combineReducers({
          messages,
          conversation,
          layout,
          profile,
          contract
      });
  
      // List redux middleware to inject
      const middleware = [
          thunk,
          reduxRouterMiddleware
      ];
  
      // Compose the createStore function
      const createComposedStore = compose(
          applyMiddleware( ...middleware )/*, // Figure this out...
          ( process.env.DEBUG &amp;&amp; devToolsExtension ) ? devToolsExtension() : f =&gt; f*/
      )( createStore );
  
      // Create the store
      const store = createComposedStore( rootReducer );
  
      // Hook up Redux Routing middleware
      // reduxRouterMiddleware.listenForReplays(store);
  
      // Return store
      return store;
  };
  </code></pre>