Preact redux and preact router: Routes not rendered

Question

I use the following Stack:

"dependencies": { "preact": "^8.2.1", "preact-compat": "^3.17.0", "preact-redux": "^2.0.3", "preact-router": "^2.5.5", "redux": "^3.7.2" }

in combination with the preact-cli . When I then want to render the following app:

import { h, Component } from 'preact'
import { Router } from 'preact-router'
import { Provider } from 'preact-redux'
import store from '../store'

import Header from './header'
import Home from '../routes/home'
import Profile from '../routes/profile'
import Login from '../routes/login'

export default class App extends Component {
  /** Gets fired when the route changes.
   *  @param {Object} event   "change" event from [preact-router](http://git.io/preact-router)
   *  @param {string} event.url The newly routed URL
   */
  handleRoute = e => {
    this.currentUrl = e.url
  };

  render() {
    return (
      <div id="app">
        <Provider store={store}>
          <Header />
          <Router onChange={this.handleRoute}>
            <Home path="/" />
            <Login path="/login" />
            <Profile path="/profile" user="me" />
            <Profile path="/profile/:user" />
          </Router>
        </Provider>
      </div>
    )
  }
}

then only the Header component is rendered but the routes are ignored. Do you know why this happenend? When I remove the Provider component, then it works fine. Can anyone help me to find the cause for this unwanted behavior?

For the sake of completeness:

reducers/index.js

import { combineReducers } from 'redux'

import authReducer from './auth'

const rootReducer = combineReducers({
  auth: authReducer
})

export default rootReducer

reducers/auth.js

import * as consts from '../constants/auth'

const initialState = {}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case consts.LOGIN_PROCESSING:
      return {
        ...state,
        isLoginProcessing: true,
        isLoginSuccess: true,
        loginError: null
      }

    case consts.LOGIN_FAILURE:
      return {
        ...state,
        isLoginProcessing: false,
        isLoginSuccess: false,
        loginError: action.payload.error
      }

    case consts.LOGIN_SUCCESS:
      return {
        ...state,
        user: action.payload.user,
        isLoginProcessing: false,
        isLoginSuccess: true,
        loginError: null
      }

    case consts.REGISTER_PROCESSING:
      return {
        ...state,
        isRegisterProcessing: true,
        isRegisterSuccess: true,
        registerError: null
      }

    case consts.REGISTER_FAILURE:
      return {
        ...state,
        isRegisterProcessing: false,
        isRegisterSuccess: false,
        registerError: action.payload.error
      }

    case consts.REGISTER_SUCCESS:
      return {
        ...state,
        user: action.payload.user,
        isRegisterProcessing: false,
        isRegisterSuccess: true,
        registerError: null
      }

    case consts.LOGOUT_PROCESSING:
      return {
        ...state,
        isLogoutProcessing: true,
        isLogoutSuccess: true,
        logoutError: null
      }

    case consts.LOGOUT_FAILURE:
      return {
        ...state,
        isLogoutProcessing: false,
        isLogoutSuccess: false,
        logoutError: action.payload.error
      }

    case consts.LOGOUT_SUCCESS:
      return {
        ...state,
        user: null,
        isLogoutProcessing: false,
        isLogoutSuccess: true,
        logoutError: null
      }
    default:
      return state
  }
}

export default reducer

Answer 1

I solved it now by my own. The solution was quite straightforward. You simply need to add a root component as children of the redux provider:

<Provider store={store}>
  <div> // <-- adding this root element is the solution
    <Header />
    <Router onChange={this.handleRoute}>
      <Home path="/" />
    </Router>
  </div>
</Provider>