Question

我正在为我的网站使用react和react-router-dom。我有两个版本的网站，一个是针对Beta用户的版本，另一个是针对我的客户的版本。使用process.env.IS_BETA === "true"将网站加载到Beta服务器上后，我只希望用户能够访问登录名并忘记密码页面。我不希望他们访问注册页面或首页。我尝试了以下操作，但没有成功，因为我认为process.env在构建时已经被读取。

export const App = () => (
    <BrowserRouter>
        <div className="d-flex flex-column height-100vh">
            <Navbar />
                {process.env.IS_BETA === "true" && (
                    <Switch>
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/Login" />
                    </Switch>
                )}
                {process.env.IS_BETA !== "true" && (
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Register" component={Register} />
                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/" />
                    </Switch>
                )}
            <Footer />
        </div>
    </BrowserRouter>
);

如何在Beta服务器上重定向或不加载某些页面？

Answer 1

process.env在Javascript代码中不可用，但在编译时将对Webpack可用。 Webpack支持使用DefinePlugin在Javascript环境中定义全局变量，因此可以通过如下添加新的插件定义来实现：

plugins: [
    new webpack.DefinePlugin({
        __IS_BETA__: process.env.IS_BETA === "true",
    }),
],

在Webpack配置中，将根据编译应用时IS_BETA环境变量是否设置为true来在整个Javascript代码中替换__IS_BETA__。

然后您可以像这样在React代码中引用它：

export const App = () => (
    <BrowserRouter>
        <div className="d-flex flex-column height-100vh">
            <Navbar />
                {__IS_BETA__ && (
                    <Switch>
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/Login" />
                    </Switch>
                )}
                {!__IS_BETA__ && (
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Register" component={Register} />
                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/" />
                    </Switch>
                )}
            <Footer />
        </div>
    </BrowserRouter>
);

在Beta服务器上加载的路由与主服务器上加载的路由不同？

1 个答案: