在 react-router 中配置应用程序的基本名称答案

【问题标题】：Configuring app's basename in react-router在 react-router 中配置应用程序的基本名称
【发布时间】：2017-05-17 08:27:12
【问题描述】：

我在 react-router 2.x 配置方面有些吃力，特别是应用程序基名。

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

/ 正在开发中
/users 在生产中
/account 迁移后生产中

基本名称在几个地方发挥作用：

Webpack 中的静态资源编译
react-router 主要配置
在 redux 操作中指定重定向路由
为 API 调用提供类似 redirectUrl 的内容

我目前的解决方案是拥有一个 ENV 变量，并通过 Express 服务器注入 window.defs 使其对 Webpack 和应用程序本身都可用，但我最终仍然在太多地方拥有像 ${defs.APP_BASENAME}/signin 这样的东西整个应用程序。

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

【问题讨论】：

标签： react-router react-router-redux

【解决方案1】：

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

// 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，因此：

URL /users 内部匹配路径 /
URL /users/profile 与路径 /profile 匹配。

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

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

【讨论】：

【解决方案2】：

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

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

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

在 Webpack 配置文件中，我为我的 localhost 开发环境定义了一个插件：

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

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

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

在我的 react-router 定义中，我只是参考：

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

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

【讨论】：

【解决方案3】：

试试这个吧

import { createBrowserHistory } from 'history';

const history = createBrowserHistory({
  basename: 'base-name'
}) 

<Router history={history}>
</Router>

【讨论】：