0

我有一个带有 react-router-dom、connected-react-router 和 react-redux 的应用程序，我已将它们全部更新到可用的最新稳定版本。

现在由于某种原因，商店没有被传递给 ConnectedRoute 的子组件。

包.json

{
  ...,
  "connected-react-router": "^6.3.2",
  "react-redux": "^6.0.1",
  "react-router-dom": "^4.3.1",
  ...,
}

减速器.js

export default history => combineReducers({
  router: connectRouter(history),
  agent,
  ...,
});

configureStore.js

export const history = createBrowserHistory();

const initialState = {};
const enhancers = [];
const middleware = [apiAuthInjector, promise, thunk, routerMiddleware(history), logger];

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers,
);

const store = createStore(createRootReducer(history), initialState, composedEnhancers);

export default store;

应用程序.js

class App extends Component {
  componentDidMount() {
    const { onSetSession } = this.props;
    const username = Cookies.get('username');
    const token = Cookies.get('token');
    username && token && onSetSession({ username, token });
  }

  render() {
    return (
      <Switch>
        <PrivateRoute exact path="/" component={Funnel} />
        <Route exact path="/login" component={Login} />
      </Switch>
    );
  }
}

export default App;

索引.js

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.querySelector('#root'),
);

PrivateRoute.js

class PrivateRoute extends React.Component {
  componentDidMount() {
    const { username, token, isFetching, onValidateSession } = this.props;
    !isFetching && onValidateSession({ username, token });
  }

  render() {
    const { username, component: Component, ...rest } = this.props;
    return (
      <Route
        {...rest}
        render={props => (username ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location },
              search: props.location.search,
            }}
          />
        ))
        }
      />
    );
  }
}

export default PrivateRoute;

PrivateRouteContainer.js

import { connect } from 'react-redux';

import { validateSession } from 'actions/agent';

import PrivateRoute from './PrivateRoute';

const mapStateToProps = ({ agent }) => ({ ...agent });

const mapDispatchToProps = dispatch => ({
  onValidateSession: payload => dispatch(validateSession(payload)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(PrivateRoute);

你们知道我在这个设置上做错了什么吗？它看起来像他们在他们的文档中描述的那样，但是当我 console.log(this.props) 时，我只得到与历史相关的道具，没有别的。

4

1 回答 1

0

您没有像这样将组件与 redux 存储连接

const mapStateToProps = state => ({
  pathname: state.router.location.pathname,
  search: state.router.location.search,
  hash: state.router.location.hash,
});

export default connect(mapStateToProps)(PrivateRoute);
于 2019-03-15T07:23:29.210 回答