Javascript 使用Redux路由器+；反应路由器

我正在使用1.0.0-rc3和1.0.0-beta3

使用React Router时，您可以使用

useBasename

和

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>

但是，在Redux路由器中，您需要将

createHistory

而不是

history

传递给还原器：

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

---

在这种情况下如何使用

useBasename

？

您可以创建一个包装

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>

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

并将其传递给

撰写
：

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

API经常变化，所以这对我来说很有用（我正在使用
2.0.3
版本的
redux简单路由器
）。我已在单独的文件中定义了自定义历史记录：

从'react router'导入{useRouterHistory}
从“历史”导入{createHistory，useBasename}
从“../config”导入{baseUrl}
const browserHistory=useRouterHistory（useBasename（createHistory））({
basename:“/appgen”
});

现在我需要初始化存储：

从“redux简单路由器”导入{syncHistory，routeReducer}
从“../misc/browserHistory”导入browserHistory
const rootReducer=combinereducer({
//…其他减速器
路由：路由传感器
});
const reduxRouterMiddleware=同步历史记录（浏览器历史记录）；
const finalCreateStore=compose(
//…其他中间件
applyMiddleware（reduxRouterMiddleware），
)（createStore）；
const store=finalCreateStore（rootReducer，initialState）；

最后，您需要将
历史记录
传递给
路由器

从“./misc/browserHistory”导入浏览器历史记录
从“../routes”导入路由
导出默认类根扩展组件{
静态类型={
历史记录：PropTypes.object.isRequired
};
render（）{
返回(
{routes}
)
}
}


在我提出这个问题之前，我使用的是手动解决方案。我定义了我自己的
Link
组件和我自己的redux操作，它们负责预处理基本URL。它可能对某人有用

更新的
链接
组件：

import React，{Component}来自“React”
从“react router”导入{Link as RouterLink}
从“../config”导入{baseUrl}
导出默认类链接扩展组件{
render（）{
返回
}
}

自定义操作创建者：

从“redux简单路由器”导入{routeActions}
从“../config”导入{baseUrl}
导出函数转到（路径）{
返回routeActions.push（baseUrl+'/'+路径）；
}

更新的根路由：

从“/config”导入{baseUrl}
导出默认值(
//…嵌套路由
);

请注意，这些自定义工具仅支持推送更新的路径，而不支持位置描述符对象。
对于react router v2或v3，使用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)

从'history'导入{createHistory}
从“react router”导入{useRouterHistory}
从“react router redux”导入{syncHistoryWithStore}
const browserHistory=useRouterHistory（createHistory）({
基本名称：“”
})
const history=syncHistoryWithStore（浏览器历史记录，存储）

当没有额外的基本URL时，设置的其余部分与往常一样。
Diego V答案的变体对我有效（不知道我在做什么）：

我正在替换：

//const _browserHistory = useScroll(() => browserHistory)()

如果您使用的是最新的
react路由器
和
react路由器redux
我没有使用react路由器redux，建议您使用但是上面的代码对我有效，省略了最后一行。我无法将其用于最新版本的历史记录：
createHistory不是一个函数
。如果I
const createHistory=require（'history'）。createBrowserHistory
那么我的路线似乎与
basename:'/'
不匹配。有什么想法吗？我刚刚用
历史
和
react的相同（旧）版本实现了它-router@2.8.1
does:
history@2.1.2
。如果有人使用最新版本（例如
history@4.3.0
）请让我知道。@DamianoBarbati你不能因为这个答案现在不适合你就否决它。这是对原始问题的正确书面回答。请成熟地使用您的特权。我不确定第二个示例（“您可以使用useBasename以这种方式编写”）是什么意思。它似乎在使用“历史记录”模块（不是React的一部分）。此外，如果您已经在使用从react router导入的“browserHistory”对象，则不能使用“const browserHistory”定义覆盖它。如果我将其替换为“newBrowserHistory”，则会得到错误“TypeError:\u history.useBasename不是函数”。所以我真的不能理解这个例子的头绪。你使用“browserHistory.push（'/otherPage'）”吗？如果是这样的话-你是否设置了其他东西使其工作？当我这样做的时候，我失去了基本名称…不。虽然已经有一段时间了，但我认为正确的做法是分派
goTo
操作，而不是手动使用低级API。
//const _browserHistory = useScroll(() => browserHistory)()