在React-Router中配置应用的基本名称

Question

我在使用react-router 2.x配置（特别是应用程序基本名称）时有些挣扎。

我有一个应用程序，在其整个生命周期中可能具有不同的基本根。例如：

• / 开发中
• /users 在生产中
• /account 迁移后投入生产

基本名称在以下几个地方起作用：

• Webpack中的静态资产编译
• react-router主要配置
• 在redux操作中指定重定向路由
• 提供类似于redirectUrlAPI的调用

我当前的解决方案是拥有一个ENV变量，并window.defs通过Express服务器进行注入，使其既可用于Webpack，也可用于应用程序本身，但最终仍然会${defs.APP_BASENAME}/signin在整个应用程序中出现太多问题。

如何提取应用程序库，或者至少将其存放在单个位置？我应该能够在Router的配置中指定基本路由，然后以某种方式简单地使用相对路由，对吗？还是我错过了什么？

Answer 1

今天我遇到了同样的问题：在我的本地主机上，我让 NGINX 在根上下文中提供内容，但在我的生产服务器上，Apache 从子目录中提供内容......

受到 Paul S 回答的启发，并受到这里信息的启发：https : //github.com/ReactTraining/react-router/issues/353

我得到了适合我的工作解决方案：

在 Webpack 配置文件中，我为我的 localhost dev env 定义了一个插件：

  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/")
    })
  ],

在 Webpack PROD配置文件中，我在子文件夹中为我的 prod 环境定义了一个插件，即 www.example.com/users：

  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/users/")
    }),

在我的反应路由器定义中，我只是参考：

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { useBasename } from 'history'
...
<Router history={useBasename(() => browserHistory)({ basename: BASENAME })}>

对我来说，这是一个非常优雅的解决方案，也很容易。我只花了大约五个小时环顾四周:-)

Answer 2

您可以history用basename装饰您的名字。您可以将其与DefinePluginWebpack配置中的混合使用，以指定应使用的基本名称。

// webpack.config.js
new Webpack.DefinePlugin({
  BASENAME: '/users'
})

// somewhere in your application
import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: BASENAME
})

给定基本名称：/users，React Router将忽略/users路径名称开头的，因此：

1. URL /users在内部通过路径匹配/

2. URL /users/profile与路径匹配/profile。

同样，在应用程序中导航时，不必将基本名称附加到路径中。

3. <Link to='/friends'>Friends</Link>将在/friends内部导航到，但位置栏中的URL将是/users/friends。