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

Question

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

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

/开发中

/users生产中

/account迁移后生产中

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

Webpack 中的静态资源编译

react-router主要配置

在 redux 操作中指定重定向路由

提供类似 redirectUrl 的内容到 API 调用

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

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

Answer 1

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

// 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在内部，但地址栏中的 URL 将是 /users/friends .