如何在index.js中配置react-router dom、react-rooter redux

Question

这是我的index.js。问题是Chackout路由没有单独显示，因为我在同一页上有'/'路由和/Chackout路由。我尝试了所有方法，但都不起作用，因为我无法将状态从redux发送到checkout组件。

我尝试过使用HashRouter代替Router，并将history更改为从history包导入的hashHistory。问题仍然存在，我只能在与主组件相同的页面上呈现redux存储，但不能在CheckoutContainer组件中呈现。

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import { Provider } from 'react-redux'
import {Route, Router} from 'react-router'
import {routerMiddleware, syncHistoryWithStore, routerReducer, ConnectedRouter as RouterR} from 'react-router-redux'
import {HashRouter, withRouter} from 'react-router-dom'
import {createHashHistory} from 'history';
import createHistory from 'history/createBrowserHistory';
import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk'
import promiseMiddleware from 'redux-promise-middleware'
import reducer from './reducers'
import {
fetchAllDummyItems,
fetchContainerId,
} from './actions'
import App from './containers/App'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import CheckoutContainer from './containers/CheckoutContainer'
let hashHistory = createHashHistory()
const history = createHistory()
const middlewareRoute = routerMiddleware(history)
const reducers = combineReducers({ register: reducer, router: routerReducer })
const middleware = [
thunkMiddleware,
promiseMiddleware({
promiseTypeSuffixes: ['REQ', 'ACK', 'ERR'],
}),
];

if (process.env.NODE_ENV !== 'production') {
middleware.push(createLogger());
}
const store = createStore(
reducer,
applyMiddleware(...middleware)
)
const muiTheme = getMuiTheme({
textField: {
focusColor: '#9fa5a8',
},
})
store.dispatch(fetchAllDummyItems())
store.dispatch(fetchContainerId())
render(
<Provider store={store}>
<MuiThemeProvider muiTheme={muiTheme}>
<Router history={history}>
<Route path="/" component={App} />
<Route path="/checkout" component={CheckoutContainer} />
</Router>
</MuiThemeProvider>
</Provider>,
document.getElementById('root')
)

Answer 1

如果您想在path="checkout"中显示CheckoutContainer，您应该在组件中使用确切的bool-这里。

另外一件事是，如果你总是想一次渲染一个组件，你也应该使用组件集-检查这个

Answer 2

使用React钩子在组件之间传递数据和状态要容易得多，无论这些组件在其层次结构中是无关的