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. 

 

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 (        
                 
                      
                       
                       
                   
              
         );}

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 (        
     
            
      
Enter a Github Username
            
       search(router, e.target.value)}            />        
     
    );});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 = () => (    
     
        
      
Error!
        
      Home    
     
);