使用Redux-Router + React-Router为应用程序添加基本URL

Question

我正在使用React-Router 1.0.0-rc3和Redux-Router 1.0.0-beta3.

使用React-Router时,您可以使用useBasenamewith createHistory来设置应用程序的基本URL,以便您可以轻松编写在子目录中运行的应用程序.示例:

而不是这个:

import { createHistory } from 'history';

let base = "/app_name/"

<Router history={browserHistory}>
  <Route path={base} component={App}></Route>
</Router>

<Link path={base + "some_path"}>some_path</Link>

您可以使用以下方式编写useBasename:

import { createHistory, useBasename } from 'history';

const browserHistory = useBasename(createHistory)({
  basename: "/app_name"
});

<Router history={browserHistory}>
  <Route path="/" component={App}></Route>
</Router>

<Link path="/some_path">some_path</Link>

但是,在Redux-Router中,您需要传递createHistory而不是history减速器:

const store = compose(
  applyMiddleware(m1, m2, m3),
  reduxReactRouter({
    routes,
    createHistory
  }),
  devTools()
)(createStore)(reducer);

useBasename在这种情况下我们如何使用？

Answer 1

对于react-router v2或v3并使用react-router-redux v4而不是redux-router,历史对象的设置如下所示:

import { createHistory } from 'history'
import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'

const browserHistory = useRouterHistory(createHistory)({
  basename: '<yourBaseUrl>'
})
const history = syncHistoryWithStore(browserHistory, store)

当没有额外的基本URL时,其余设置与往常一样.

Answer 2

您可以创建一个包装函数useBasename：

const createHistoryWithBasename = (historyOptions) => {
  return useBasename(createHistory)({
    basename: '/app_name',
    ...historyOptions
  })
}

并将其传递给compose：

const store = compose(
  applyMiddleware(m1, m2, m3),
  reduxReactRouter({
    routes,
    createHistory: createHistoryWithBaseName
  }),
  devTools()
)(createStore)(reducer);