我正在学习 Redux,随着 react-router-dom 的新变化,我有点困惑。我有这些文件:
索引.js
import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);
应用程序.js
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
import Main from '../components/Main';
function mapStateToProps(state) {
return {
search: state.search,
navigation: state.navigation,
};
}
export function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
const App = connect(mapStateToProps, mapDispatchToProps)(Main);
export default App;
最后,Main.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Listing from './Listing';
import SingleListing from './SingleListing';
const Main = () => (
<Router>
<div className="wrapper">
<Header />
<Route exact path="/" component={Listing} />
<Route path="/list" component={SingleListing} />
<Footer />
</div>
</Router>
);
export default Main;
这段代码工作得很好,当我去 localhost:3000/list 或者如果我点击它就可以了。
但是我觉得我做错了什么,正确的方法应该是包裹到里面的 index.js
所以我应该做这样的事情:
<Router>
<Provider store={store}>
<App />
</Provider>,
</Router>
document.getElementById('root'),
然后在 Main.js
<div className="wrapper">
<Header />
<Route exact path="/" component={Listing} />
<Route path="/list" component={SingleListing} />
<Footer />
</div>
但是,当我这样做时,如果我直接访问 localhost/list 链接,我可以看到该组件,但如果我点击任何链接,则不会发生任何事情。
我对如何正确使用带有 redux 的路由器感到困惑。这是我在 reducers/index.js 中使用的代码
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import search from './search';
import navigation from './navigation';
const rootReducer = combineReducers({ search, navigation, routing: routerReducer });
export default rootReducer;
我在网上和 youtube 上研究了这个网站和许多教程,但我不明白我的代码是否正确,我知道它有效,但我有兴趣了解这是否是正确的方法。谢谢!