Preact redux和preact路由器:未呈现的路由

Question

我使用以下堆栈：

“依赖关系”：{ "preact"："^8.2.1“、"preact-compat"："^3.17.0”、"preact-redux"："^2.0.3“、”preact-路由器“："^2.5.5”、"redux"："^3.7.2“}

与预演-相结合。当我想呈现以下应用程序时：

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

然后只呈现Header组件，但忽略路由。你知道为什么会这样吗？当我删除Provider组件时，它就可以正常工作了。有人能帮我找出这种不想要的行为的原因吗？

为了完整起见：

减速器/索引.

import { combineReducers } from 'redux'

import authReducer from './auth'

const rootReducer = combineReducers({
  auth: authReducer
})

export default rootReducer

还原剂/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

现在我自己解决了。解决办法很简单。只需将根组件添加为redux提供程序的子组件：

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