score:15

Accepted answer

(OP already solved his issue, but this ranks high in Google and is not very helpful for newcomers, so I thought I'd provide some background info)

Preact and preact-compat

preact is a minimal version of React that weighs just 3Kb. It implements a subset of React's API, with some small differences here and there. It also comes with a helper library, preact-compat, which provides compatibility with React by filling in missing parts and patching up API differences.

React-Router

react-router is a router library designed to work with React. But you can make it work with Preact as well, using preact-compat.

Setting up preact-compat

npm i --save preact-compat

Make sure you set up aliases for react and react-dom in your webpack / browserify configuration, or write some code to set up these aliases manually.

example webpack config

{
    // ...
    resolve: {
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat'
        }
    }
    // ...
}

Then you can use React Components as-is. They won't know they are being rendered by Preact i.s.o. React. Have a look at this preact-compat-example.

Issues with compatibility

Keep in mind that when you are using Preact Compat, you are taking a risk. Jason is a very smart guy, but his library is only a fraction of the size of the one provided by Facebook so there's bound to be some differences. Components that use lesser known features of React might not work correctly. If you encounter such issues, report them to the preact-compat issue tracker (with a minimal reproduction in the form of a GitHub repo) to help him improve it.

There have been a few of such issues in the past that prevented React-Router from working correctly with Preact, but they have been fixed since and you should now be able to use the two together nicely.

Fiddle of Preact + React-Router

Have a look at this JS Fiddle for a working example.

score:-1

Found the issue, was a pair of problems with Preact's compatibility with React:

Contexts not handled correctly:

https://github.com/developit/preact/issues/156

props.children not handled correctly:

https://github.com/developit/preact-compat/issues/47#issuecomment-220128365

score:-1

Here is extend solution for preact-router with hash support. Works with reload and direct access.

https://www.webpackbin.com/bins/-KvgdLnM5ZoFXJ7d3hWi

import {Router, Link} from 'preact-router';
import {h, render} from 'preact';
import {createHashHistory} from 'history';

[cut]...[/cut]

const App = () => (
    <div>   
      <Header />
      <Router history={createHashHistory()}>            
        <Page1 default path="/" />
        <Page2 path="/page2" />
      </Router>
    </div>
);    
render(<App />, document.body);

score:3

Updated answer is there is a preact-router package now: https://www.npmjs.com/package/preact-router

import Router from 'preact-router';
import { h } from 'preact';

const Main = () => (
  <Router>
    <Home path="/" />
    <About path="/about" />
    <Search path="/search/:query" />
  </Router>
);

render(<Main />, document.body);

Related Query

More Query from same tag