React Redux và phản ứng-router-dom

Question

Tôi đang học Redux, và với những thay đổi mới trong phản ứng-router-dom Tôi là một chút bối rối. Tôi có những tập tin này:

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; 

Cuối cùng, 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; 

Mã này chỉ hoạt động tốt, khi tôi đi đến localhost: 3000/list hoặc nếu tôi nhấp vào nó hoạt động.

Tuy nhiên tôi có cảm giác rằng tôi đang làm điều gì sai và rằng cách chính xác nên được quấn vào index.js bên

vì vậy tôi nên làm một cái gì đó như thế này:

<Router> 
    <Provider store={store}> 
    <App /> 
    </Provider>, 
</Router> 

document.getElementById ('root'),

Và sau đó trong Main.js

<div className="wrapper"> 
    <Header /> 
    <Route exact path="/" component={Listing} /> 
    <Route path="/list" component={SingleListing} /> 
    <Footer /> 
</div> 

Tuy nhiên khi tôi làm điều này, nếu tôi đi trực tiếp đến liên kết localhost/danh sách tôi có thể thấy thành phần, nhưng nếu tôi clink vào bất kỳ liên kết không có gì xảy ra.

Tôi đang bối rối về cách sử dụng chính xác bộ định tuyến với redux. Đây là mã tôi đang sử dụng bên trong gia giảm/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; 

Tôi đã nghiên cứu trang web này và nhiều hướng dẫn trực tuyến và trên youtube, nhưng tôi không hiểu nếu tôi đang làm một cách chính xác trong mã của tôi, tôi biết nó hoạt động nhưng tôi quan tâm đến việc học nếu đây là cách chính xác. Cảm ơn bạn!

Answer 1

Có, bạn đang viết bộ định tuyến chính xác. Mối quan tâm của bạn là dễ hiểu. Cho đến phiên bản 4.0.0, react-router có cách khác để khai báo tuyến đường. Bạn sẽ định nghĩa một Router như trong ví dụ thứ hai của bạn, nhưng thay vì định nghĩa các tuyến trong các thành phần, bạn sẽ định nghĩa các tuyến trong Bộ định tuyến. Dưới đây là một ví dụ về react-router trước 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> 
); 

Bạn sẽ xác định các router và tất cả các tuyến đường, subroutes, và các thành phần để sử dụng ở một nơi và bạn sẽ cung cấp điều đó cho ReactDOM.render()

Có cách đầu tiên để làm mọi thứ là chính xác và là cách những người đứng sau React Router mong đợi mọi người sử dụng giao diện.

Về câu hỏi cuối cùng, bạn có gặp lỗi với mã đó bằng cách sử dụng react-router-redux không? Nhìn vào this để tham khảo, nó có vẻ là chính xác.