Question

因此，我有一个域URL，将其用于不同的路径以向api发出不同的请求。因此，例如“ api.example-url.com”，我将其与“ api.example-url.com/path1”和“ api.example-url.com/path2”等不同的路径一起使用，因此我想保存域url放在一个文件中，然后将其导入到不同的组件中，因此我可以将其与不同的路径一起使用，并且只要域发生更改，我都可以在该文件中更改域。在Reactjs中有可能吗？

Answer 1

执行此操作的方法有多种，

webpack

    plugins: [
     new webpack.DefinePlugin({
     BASE_URL: (typeof process.env.BASE_URL !== 'undefined') ? 
      process.env.BASE_URL : 'http://localhost:3000'
     })
    ],

您可以在webpack配置中定义它。因此您可以在代码中的任何地方使用。

其他是定义一个常量并将其导入以便在代码中的任何地方使用。

export const BASE_URL = "http://example.com"

Answer 2

为此使用环境变量。您可以使用process.env插件webpack或DefinePlugin来访问EnvironmentPlugin。这是文档（https://webpack.js.org/plugins/environment-plugin/）。

让我们假设您的环境变量名称为'ROOT_URL'，然后您可以像下面那样创建网址

url = '${process.env.ROOT_URL}/YOUR_PATH'

更新

如果您使用的是create-react-app。您可以从REACT_APP_[YOUR_VARIABLE]开始设置环境变量名称。在您的情况下，变量名将为REACT_APP_ROOT_URL，并且url也将相应地进行更改。

如何将域网址保存在单个文件中，并在不同组件中重复使用？

2 个答案: