javascript - React、Javascript - 在 "store"的上下文中找不到 "Connect(App)"

Question

我正在尝试将 propTypes 和 mapStateToProps 添加到 React-intl 的 App.js 组件中。但它说无法在“Connect(App)”上下文中找到“store”。

我的App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import jwt_decode from "jwt-decode";
import setAuthToken from "./utils/setAuthToken";
import { setCurrentUser, logoutUser } from "./actions/authActions";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import { Provider } from "react-redux";
import store from "./store";

import PrivateRoute from "./components/common/PrivateRoute";

import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import Main from "./components/main/Main";
import Account from "./components/main/Account";

import { IntlProvider } from "react-intl";
import "./App.css";

// Check for token
if (localStorage.jwtToken) {
  // Set auth token header auth
  setAuthToken(localStorage.jwtToken);
  // Decode token and get user info and exp
  const decoded = jwt_decode(localStorage.jwtToken);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));

  // Check for expired token
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());
    // TODO: Clear current Profile

    // Redirect to login
    window.location.href = "/login";
  }
}

class App extends Component {
  render() {
    const { lang } = this.props;
    return (
      <Provider store={store}>
        <Router>
          <IntlProvider locale={lang}>
            <div className="App">
              <Navbar />
              <Route exact path="/" component={Register} />
              <Route exact path="/login" component={Login} />
              <Switch>
                <PrivateRoute exact path="/dashboard" component={Main} />
                <PrivateRoute exact path="/account" component={Account} />
              </Switch>
              <Footer />
            </div>
          </IntlProvider>
        </Router>
      </Provider>
    );
  }
}

App.propTypes = {
  lang: PropTypes.string.isRequired
};

const mapStateToProps = state => ({
  lang: state.locale.lang
});

export default connect(mapStateToProps)(App);

说“在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给 Connect(App)，并将相应的 React 上下文使用者传递给 Connect(App)连接选项。”

Answer 1

尝试移动<Provider />和<Router />至index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';
import store from './store';

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </BrowserRouter>, document.getElementById('root'));

App.js

class App extends Component {
  render() {
    const { lang } = this.props;
    return (
          <IntlProvider locale={lang}>
            <div className="App">
              <Navbar />
              <Route exact path="/" component={Register} />
              <Route exact path="/login" component={Login} />
              <Switch>
                <PrivateRoute exact path="/dashboard" component={Main} />
                <PrivateRoute exact path="/account" component={Account} />
              </Switch>
              <Footer />
            </div>
          </IntlProvider>
    );
  }
}