Question

我正在使用React + Redux + Express。每当我重新加载localhost/courses时，我都会收到错误，找不到“存储”。但如果我从localhost -> click to nav course出发，一切都运转良好。我该如何解决这个问题？

错误

不变违规：无法在上下文中找到“存储”或 “连接（课程）”的道具。将根组件包装在一个提供者，或明确地将“商店”作为道具传递给“连接（课程）”。

store.js

const middleware = applyMiddleware(promise(), thunk, logger());

export default createStore(reducer, middleware);

App.js

window.onload = () => {
  ReactDOM.render(
    <Provider store={store}>
      <Router history={browserHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
    </Provider>
    , document.getElementById('main'));
};

routes.js

const routes = (
  <Route path='/' component={Layout}>
    <IndexRoute component={Home}/>
    <Route path='courses' data={data} component={Course}>          
  </Route>
);

export default routes;

Course.js

class Course extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object,
  };

  componentWillMount() {
    this.props.dispatch(fetchVocabulary());
  };

  render() {
    console.log(this.props.words);
    return (
      <div>
        ...
      </div>
    );
  };
}

export default connect((store) => {
  return {
    words: store.vocabulary.words
  };
})(Course);

的package.json

"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.1.0",

Answer 1

由于您使用的是browserHistory，因此您需要使用historyApiFallback

devServer: {
        historyApiFallback:true
    }

如果路由与任何其他文件不匹配，则使用connect-history-api-fallback提供index.html，然后所有路由都将与此文件相关

React-redux无法找到商店

1 个答案: