Load different routes on beta server than on main server? - react-router-dom

Question

I'm using react and react-router-dom for my website. I have two versions of the site, one that it for beta users and the other that is for my customers. When the site is loaded on the beta server with process.env.IS_BETA === "true" I only want users to be able to access the login and forgot my password pages. I don't want them to access the registration page or the front page. I tried the following but it didn't work because I think the process.env is already read when it's built.
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>
);
How do I redirect or not load some pages on the beta server?

Answer 1

process.env is not available direclty in your Javascript code, but it will be available to Webpack at compile time. Webpack supports defining globals within your Javascript environment with the DefinePlugin, so by adding a new plugin definition as follows:
plugins: [
new webpack.DefinePlugin({
__IS_BETA__: process.env.IS_BETA === "true",
}),
],
in your Webpack config, __IS_BETA__ will be replaced throughout your Javascript code based on whether IS_BETA environment variable was set to true when compiling your app.
You can then reference it in your React code as such:
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>
);