javascript - Preact redux 和 preact 路由器 : Routes not rendered

Question

我使用以下堆栈:

“依赖”:{ "preact": "^8.2.1", “预兼容”:“^3.17.0”， “preact-redux”:“^2.0.3”， “预路由器”:“^2.5.5”， “redux”:“^3.7.2”

结合preact-cli .当我想呈现以下应用程序时:

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 组件时，它工作正常。任何人都可以帮我找到这种不良行为的原因吗？

为了完整起见:

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

我现在自己解决了。解决方案非常简单。您只需添加一个根组件作为 redux 提供程序的子组件:

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