Question

我尝试将路由器v4与redux连接起来，但它无法正常工作。我正在使用文档中描述的withRouter，但道具组件中没有道具可用。有什么想法吗？

这是我的代码：

index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { routerMiddleware } from 'react-router-redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();

const logger = createLogger();

const middleware = [
  thunk,
  routerMiddleware(history)
];

if (process.env.NODE_ENV === 'development') {
  middleware.push(logger);
}

// create store
const store = createStore(
  reducers,
  applyMiddleware(...middleware)
);

render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';
import { Switch, Route, Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

class App extends Component {
  componentDidMount() {
    this.props.fetchPages(API_PAGES);
    this.props.fetchPosts(API_POSTS);
  }

  render() {
    return (
      !this.props.pages.isFetching ?
        <div>
          <ul>
            {this.props.pages.data && this.props.pages.data.map(page => (
              <li key={page.id}>
                <Link to={page.slug}>{page.title.rendered}</Link>
              </li>
            ))}
          </ul>

          <Switch location={this.props.location}>
            <Route path={routes.HOME} exact component={Home} />
            <Route path={routes.ABOUT} component={About} />
            <Route path={routes.CONTACT} component={Contact} />
            <Route path={routes.NEWS} component={News} />
            <Route component={NotFound} />
          </Switch>

        </div> :
        <p>Loading...</p>
    );
  }
}

function mapStateToProps(state) {
  return state;
}

export default withRouter(connect(
  mapStateToProps,
  { ...actions }
)(App));

减速器/ index.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

export default combineReducers({
  pages,
  posts,
  routing: routerReducer
});

组件/ Home.js

import React from 'react';

const Home = (props) => {
  console.log('home', props);

  return (
    <div>
      This is the home page.
    </div>
  );
};

export default Home;

Answer 1

由于您使用的是react-router v4，因此您需要使用react-router-redux v5。 See here

这使用不同的npm包来安装react-router-redux：

npm install --save react-router-redux@next

路由减少器应该在combineReducers中具有路由器密钥（而不是路由）。

然后您将需要使用ConnectedRouter并传递您的历史记录对象，如此...

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

Answer 2

你应该将道具传递给这样的家庭组件，以使其在那里可用，

<Route path={routes.HOME} exact component={(props)=><Home {...props} newProps={value you want to pass}/> }/>

React路由器不使用Redux，不接收道具

2 个答案: