Question

我在使用react-router 2.x配置时苦苦挣扎，特别是app basename。

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

/
/users
/account正在生产中

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

Webpack中的静态资产编译
react-router主要配置
在redux操作中指定重定向路由
向API调用

redirectUrl

我目前的解决方案是拥有一个ENV变量，并通过Express服务器注入window.defs使其可用于Webpack和应用程序本身，但我仍然最终得到${defs.APP_BASENAME}/signin之类的内容整个应用程序中的地方太多了。

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

Answer 1

您可以使用basename装饰history。您可以将其与Webpack配置中的DefinePlugin混合，以指定应使用哪个basename。

// 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，所以：

网址/users内部匹配路径/
网址/users/profile与路径/profile匹配。

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

<Link to='/friends'>Friends</Link>将在内部导航至/friends，但位置栏中的网址将为/users/friends。

Answer 2

今天我遇到了同样的问题：在我的localhost上，我让NGINX在root上下文中提供服务，但在我的prod服务器上，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 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 })}>

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

Answer 3

尝试一下，它将起作用

import { createBrowserHistory } from 'history';

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

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

在react-router

3 个答案: