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

我想创建一个可以在根以外的任意路径被托管的应用程序做出反应 - "/"使用自定义基本名称时，为什么react-router-redux不起作用？

所以，我想申请使用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"

来源

2016-12-13 Jeff Fohl

的'history'是'反应，router'的V4 V4。你应该使用'history'的v3，尽管我不能肯定地说这将解决你的问题。 –

是的，这是问题 - 谢谢！虽然，我需要使用“历史”的v2。另外，在'history'的v2中，没有'createBrowserHistory'，它只是'createHistory'。如果您想回答，我会将其标记为正确的答案。 –

没问题。 RR的v3应该是v2的API兼容版本，它只是从RR v1中删除了弃用的代码。不过，我不确定历史差异是否会导致'history'的v3与'react-router'的v2.0.0不兼容。 –

的history V4是为react-router V4和有打破API的变化，使其与react-router以前的版本不兼容。 history的v2/3应与react-router的v2/3一起使用。

来源

2016-12-14 00:07:08

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" 
    }

来源

2016-12-29 08:29:42 shixukai

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

回答

相关问题