ReactJS-道具未被传递给组件

Question

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

现在出于某种原因，商店没有传递给connectedRoute的儿童组成部分。

package.json

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

reducer.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;

app.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;

index.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）时，我只会得到与历史相关的道具，而其他任何内容。

Answer 1

您没有像这样的redux商店将组件连接起来

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