反应路由器+ Redux？

Question

我正在看 this tutorial 我想知道你如何将它与 redux 一起使用？

我现在的渲染

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

教程中的路由器渲染示例

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={Featured}></IndexRoute>
      <Route path="archives(/:article)" name="archives" component={Archives}></Route>
      <Route path="settings" name="settings" component={Settings}></Route>
    </Route>
  </Router>,
app);

我不确定 Provider 如何融入其中。

Answer 1

所以 Provider 只是一个包装器组件，它包装了您的应用程序的其余部分，因此无论根组件是什么，它都应该围绕着它。在您上面描述的示例中，Router 将被视为您应用程序中的根组件。即

ReactDom.render(
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/" component={Layout}>
        <IndexRoute component={Featured}></IndexRoute>
        <Route path="archives(/:article)" name="archives" component={Archives}></Route>
        <Route path="settings" name="settings" component={Settings}></Route>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
);

不过，大多数人会把他们的路线分解成一个单独的文件，所以它可能看起来更像这样..

routes.js

// imports

export default (
  <Route path="/" component={Layout}>
    <IndexRoute component={Featured}
    <Route path="archives(/:article)" name="archives" component={Archives} />
    <Route path="settings" name="settings" component={Settings}></Route>
  </Route>
)

index.js

// imports
import routes from './routes';

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>{routes}</Router>
  </Provider>,
  document.getElementById('root')
);

希望对您有所帮助！

编辑：

经过进一步审查，您似乎不必将 routes 包装在 Router 组件中，您可以简单地执行以下操作： <Router history={hashHistory} routes={routes} /> 只是认为这是一个不错的增强功能！

反应路由器+ Redux？

React Router + Redux?

reactjs

react-router

react-redux