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

Posted 2023-02-21

【中文标题】在 react-router 中配置应用程序的基本名称

【英文标题】：Configuring app's basename in 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 这样的东西整个应用程序。

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

【参考方案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>