preact-router with default case not working as intended

Question

I am new to preact and I am trying to develop a project with Preact-X.

I want my project to run with default URL with only one component.

for ex: loaclhost:8080 , localhost:8080/jobs , localhost:8080/?some-parameters .

I have a component like below:

import { h } from 'preact'
import { Provider } from 'react-redux'
import { Router } from 'preact-router'
import Jobs from './jobs/index'

function App({ store }) {
    function handleRoute(e) {
        console.log(e.url)
    }

    return (
        <Provider store={store}>
            <Router onChange={handleRoute}>
                <Jobs default />
            </Router>
        </Provider>
    )
}

export default App

I am not sure why it works only for localhost:8080 but not other routes.

You can find the whole repo here

Any help would be appreciated.

Answer 1

you need to set Webpack's devServer.historyApiFallback option to true.

On line 64 of your configuration:

devServer: {
  historyApiFallback: true,
  // etc