Как настроить реагировать-маршрутизатор-дом, реагировать-маршрутизатор-редукс в индексе. js?

Question

Это мой индекс. js. Проблема в том, что маршрут Chackout не отображается сам по себе, поэтому у меня есть маршрут '/' и / chackout на одной странице. Я перепробовал все, но ничего не работает, потому что я не могу отправить свои состояния из избыточного в компонент оформления заказа.

Я попытался использовать маршрутизатор с HashRouter insted и изменить историю на hashHistory, импортированную из пакета history. Проблема остается прежней, я могу просто отобразить избыточное хранилище на той же странице, что и мой домашний компонент, но не в компоненте 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

Гораздо проще использовать перехватчики React для передачи данных и состояний между компонентами, независимо от того, не связаны ли эти компоненты в их иерархии

Answer 2

Если вы хотите отобразить CheckoutContainer в path="checkout", вы должны использовать точное значение bool в компоненте - здесь.

Еще одна вещь заключается в том, что если вы всегда хотите визуализировать 1 компонент за раз, вы также должны использовать компонент enet - отметьте this