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作爲參考，它似乎是正確的。