Question

我有一个带有react-router-dom，connected-react-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);

ReactJS-道具未传递给组件

1 个答案: