使用Redux-Router + React-Router为应用程序添加基本URL [英] Adding a base URL to an app using Redux-Router + React-Router

问题描述

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

I'm using React-Router 1.0.0-rc3 together with Redux-Router 1.0.0-beta3.

使用React-Router时，可以使用 useBasename with createHistory 设置应用程序的基本URL，以便您可以轻松编写在子目录中运行的应用程序。 示例：

When using React-Router, you can use useBasename with createHistory to set the base URL for an app, so that you can easily write an app that runs inside a subdirectory. Example:

这个：

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 以这种方式编写：

You can write in this way using 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 而不是历史到减速器：

However, in Redux-Router, you need to pass createHistory instead of history to a reducer:

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

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

How can we use useBasename in this case?

推荐答案

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

For react-router v2 or v3 and using react-router-redux v4 instead of redux-router, the setup of the history object will look like this:

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)

当没有额外的基本网址时，其他设置就像​​往常一样。

The rest of the setup is as usual when there is no extra base URL.

这篇关于使用Redux-Router + React-Router为应用程序添加基本URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！