[Preact] Integrate react-router with Preact

Posted 2020-09-23 Answer1215

React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

 

in webpack.config.js:

    resolve: {
        alias: {
            ‘react‘: ‘preact-compat‘,
            ‘react-deom‘: ‘preact-compat‘
        }
    },

Add resolve block. it alias ‘react‘ to use ‘preact-compat‘.

 

Change Route definations.

import {h} from ‘preact‘;
import { BrowserRouter as Router, Switch, Route } from ‘react-router-dom‘;
import Profile from ‘./Profile‘;
import Home from ‘./Home‘;
import Error from ‘./Error‘;

export default function App() {
    return (
        <Router>
            <Switch>
                <Route path=‘/‘ component={Home} exact />
                <Route path=‘/profile/:user‘ component={Profile} />
                <Route component={Error}></Route>
            </Switch>
        </Router>
    );
}

Using ‘Switch‘ to allow only one component showing at a time.

 

Dealing with navigation:

import { h } from ‘preact‘;
import {withRouter} from ‘react-router-dom‘;

function search(router, query) {
    router.history.push(`/profile/${encodeURIComponent(query)}`);
}

const Home = withRouter((router) => {
    return (
        <section>
            <p>Enter a Github Username</p>
            <input type="search"
                   placeholder="username"
                   onSearch={e => search(router, e.target.value)}
            />
        </section>
    );
});

export default Home;

We can use High Order component ‘withRouter‘, it inject ‘router‘ param into our component, then we can use:

router.history.push(`/profile/${encodeURIComponent(query)}`);

to nav around.

 

Get router params:

    componentDidMount() {
        const username = this.props.match.params.user;
        fetch(`${config.url}/${username}`)
            .then(resp => resp.json())
            .then(user => {
                this.setState({
                                  user,
                                  loading: false
                              });
            })
            .catch(err => console.error(err));
    }

You can get the router param by using:

const username = this.props.match.params.user;

 

Link tag:

import {h} from ‘preact‘;
import {Link} from ‘react-router-dom‘;

export default Error = () => (
    <div>
        <h2>Error!</h2>
        <Link to=‘/‘>Home</Link>
    </div>
);