React Redux和react-router-dom
问题描述:
我正在学习Redux,并且在react-router-dom中的新变化让我有点困惑。 我有这些文件:React Redux和react-router-dom
Index.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'),
);
App.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 /列表,或者如果我点击它的作品。
但是我有我做错了什么的感觉和正确的方法应该是在包装的内部index.js
所以我应该做这样的事情:
<Router>
<Provider store={store}>
<App />
</Provider>,
</Router>
的document.getElementById( '根'),
然后在Main.js
<div className="wrapper">
<Header />
<Route exact path="/" component={Listing} />
<Route path="/list" component={SingleListing} />
<Footer />
</div>
然而,当我这样做,如果我直接去链接本地主机/列表我可以看到组件,但如果我碰到任何链接什么都没有发生。
我很困惑如何正确使用路由器与REDX。 这是我使用的减压器里面的代码/ 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上,但如果我在我的代码做正确我不明白,我知道它的工作原理,但我有兴趣学习如果这是正确的方法。 谢谢!
答
是的,你正在写路由器正确。你的担心是可以理解的。在版本4.0.0之前,react-router
有不同的方式来声明路由。您可以像在第二个示例中那样定义一个路由器,但不是在组件中定义路由,而是在路由器中定义路由。下面是react-router
4.0.0之前的例子:
App.js:
//<boilerplate imports>
import Home from './components/Home';
import router from './router';
import './index.css';
ReactDOM.render(
<Router router='router' history='browserHistory'>
</Router>,
document.getElementById('root')
);
router.js:
//<boilerplate imports>
import Photographer from './components/photographer/Photographer';
import Developer from './components/developer/Developer';
import Home from './components/Home';
export default (
<Route path="/">
<IndexRoute component={Home} />
<Route path="photographer" component={Photographer} />
<Route path="developer" component={Developer} />
</Route>
);
你会定义路由器和所有的路线,子路径和组件在一个地方使用,你会最终提供的ReactDOM.render()
说了这么多,第一个做事的方法是正确的,是方式t React Router背后的人期望人们使用该界面。
关于最后一个问题,你是否在使用react-router-redux
时得到该代码的错误?看着this作为参考,它似乎是正确的。
感谢您的明确解释!:) –
随时!如果您发现这可以解答您的问题,您能否将其标记为答复?谢谢! –
在你的App.js文件浏览器历史应该在符号''。我正在纠正这一点,因为我爱你的答案:) –