为什么在使用自定义基本名称时 react-router-redux 不起作用？

Question

我正在尝试创建一个可以托管在根目录以外的任意路径的 React 应用程序 - "/"

因此，我正在尝试使用 react-router-redux 应用自定义 basename。我正在使用 history 包中的 createBrowserHistory 模块创建一个自定义 browserHistory，但这似乎没有渲染任何内容。当我使用 react-router 附带的 browserHistory 模块时，它起作用了。

有效的示例代码：

import App from 'App'
import NoMatch from 'NoMatch'
import { Router, Route, browserHistory} from 'react-router'
import { createStore, combineReducers } from 'redux'
import { syncHistoryWithStore } from 'react-router-redux'

const store = createStore(
  combineReducers({
    // reducers
  })
)

const history = syncHistoryWithStore(browserHistory, store)

render(
    <Provider store={store}>
      <Router history={history}>
        <Route path="/foo" component={App}></Route>
        <Route path="*" status={404} component={NoMatch}/>
      </Router>
    </Provider>,
  document.getElementById('app')
)

当然，这不允许我动态设置 basename。它总是 /foo/.

这是我正在尝试动态设置的方法：

import App from 'App'
import NoMatch from 'NoMatch'
import { Router, Route } from 'react-router'
import { createStore, combineReducers } from 'redux'
import { syncHistoryWithStore } from 'react-router-redux'
import { createBrowserHistory } from 'history'

const store = createStore(
  combineReducers({
    // reducers
  })
)

const browserHistory = useRouterHistory(createBrowserHistory)({
  basename: window.location.pathname
});

const history = syncHistoryWithStore(browserHistory, store)

render(
    <Provider store={store}>
      <Router history={history}>
        <Route path="/" component={App}></Route>
        <Route path="*" status={404} component={NoMatch}/>
      </Router>
    </Provider>,
  document.getElementById('app')
)

但是，当我这样做时，应用程序什么也不做。 App 组件未呈现 - NoMatch 组件也未呈现 - 因此问题似乎不是路由，而是某些东西使 Router 无法启动。

有什么想法吗？

相关模块的版本：

"react": "^0.14.7"
"redux": "^3.3.1"
"react-redux": "^4.4.6"
"react-router": "^2.0.0"
"react-router-redux": "^4.0.7"
"history": "^4.4.1"

Answer 1

history 的

v4 适用于 react-router 的 v4，并且有破坏性的 API 更改使其与以前版本的 react-router 不兼容。 history 的 v2/3 应该与 react-router 的 v2/3 一起使用。

Answer 2

import React from 'react';
import ReactDOM from 'react-dom';
import Root from 'src/Root/Root';
import configureStore from 'src/store/configureStore'
// import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux'

import { createHistory, useBasename } from 'history'
let browserHistory = useBasename(createHistory)({
  basename: '/base'
})

const store = configureStore()
const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render( <Root store={store} history={history} />, document.getElementById('appRoot'));

此代码适用于

  "dependencies": {
    "antd": "^2.5.2",
    "console-polyfill": "^0.2.3",
    "es5-shim": "^4.5.9",
    "es6-promise": "^4.0.5",
    "file-loader": "^0.9.0",
    "history": "3.2.1",
    "immutable": "^3.8.1",
    "react": "^15.4.1",
    "react-constants": "^0.2.2",
    "react-dom": "^15.4.1",
    "react-image-gallery": "^0.7.4",
    "react-redux": "^5.0.0",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-immutablejs": "^0.0.8",
    "redux-thunk": "^2.1.0",
    "whatwg-fetch": "0.11.1"
  }

为什么在使用自定义基本名称时 react-router-redux 不起作用？

Why doesn't react-router-redux work when using a custom basename?

reactjs

react-router

react-redux

react-router-redux