React Redux和react-router-dom

Question

我正在学习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上，但如果我在我的代码做正确我不明白，我知道它的工作原理，但我有兴趣学习如果这是正确的方法。 谢谢！

Answer 1

是的，你正在写路由器正确。你的担心是可以理解的。在版本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作为参考，它似乎是正确的。