I created a react app that will be served from /example-path. I defined it in the package.json like this:

"homepage":"/example-path"

It has worked so far, but now I would like to add routing with react-router-dom, and it incorrectly detects /example-path as the part of the URL.

This is my code:

<Router>
  <Switch>
    <Route path="/product/:id" children={<DisplayProduct />} />
  </Switch>
</Router>

Unfortunately react-router-dom tries to match the full URL /example-path/product/10. How is it possible to avoid that? Is it possible to access the homepage variable somehow?

I could use <Router basename="/example-path">, but in that way, this parameter is a duplicate. I would like to define it in only one place.

I created a react app that will be served from /example-path. I defined it in the package.json like this:

"homepage":"/example-path"

It has worked so far, but now I would like to add routing with react-router-dom, and it incorrectly detects /example-path as the part of the URL.

This is my code:

<Router>
  <Switch>
    <Route path="/product/:id" children={<DisplayProduct />} />
  </Switch>
</Router>

Unfortunately react-router-dom tries to match the full URL /example-path/product/10. How is it possible to avoid that? Is it possible to access the homepage variable somehow?

I could use <Router basename="/example-path">, but in that way, this parameter is a duplicate. I would like to define it in only one place.

• javascript
• reactjs
• react-router
• react-router-dom

• you don't need to access Package.json to read which is your homepage route. You want to add a concern to Package.json that does not belong to it. You can use a config.js with this configurable args and read it wherever you like. – JoelBonetR Commented Jul 26, 2021 at 12:41
• @JoelBonetR In a react project, the project root path has do be defined in the homepage parameter of package.json. That's not my choise – Iter Ator Commented Jul 26, 2021 at 13:02
• hmm no, why you should add the project root path in the package.json? You only have the entry point of your app in your package.json if you had set scripts to simplify the running, such "parcel index.js" or similar – JoelBonetR Commented Jul 26, 2021 at 13:06
• @JoelBonetR Otherwise if I put my app to /example-path/... the app tries to load assets from /static/ instead of /example-path/static/... – Iter Ator Commented Jul 26, 2021 at 13:10
• so you linked/required resources on a bad manner and now you want to add the full path instead... example-path must be the root path of your application, so when you link an asset you must use relative path './static/asset'. *Note the dot before the slash – JoelBonetR Commented Jul 26, 2021 at 13:12

5 Answers 5

How is it possible to access homepage from package.json in a react app?

We can access the URL set in package.json's homepage field using PUBLIC_URL environment variable.

We sometimes use a relative URL to deploy the application in subdirectories for example we are deploying the application in https://myhostname./example-path.

In order to do that, we can either set the environment variable PUBLIC_URL=/example-path for the application build or set the package.json homepage attribute to "/example-path". In your case, you have set the

"homepage": '/example-path/'

then the PUBLIC_URL would be set to /example-path/. Now you can access this environment variable anywhere in your react application.

<Router basename={process.env.PUBLIC_URL}>
  <Switch>
    <Route path="/product/:id" children={<DisplayProduct />} />
  </Switch>
</Router>

After running the npm run build, you can check in the build/index.html that all the places where you used the %PUBLIC_URL% is set to /example-path/ like below;

<script type="text/javascript" src="/example-path/static/js/main.ec7f1972.js">

The Router doesn't know anything about your package.json. It just looks at the browser location. You can set a basename if you use BrowserRouter:

import {BrowserRouter as Router} from 'react-router';

<Router basename="/example-path">
    {/* ... */}
</Router>

Edit: With the addition of environment variables to [email protected] and higher prefer @Alan Omars answer: Prefix an environment variable with REACT_APP_ and it will be exposed to the client at build time. docs

Here's the old answer that uses the fact that Webpack blindly replaces %PUBLIC_URL%in index.html:

Assuming you are using create-react-app, this is actually pretty straightforward:

Add the following to public/index.html:

<script>
  window.PUBLIC_URL = "%PUBLIC_URL%";
</script>

now you can reference the homepage from JavaScript! Simply access it via

const myPublicUrl = window.PUBLIC_URL;

Note: The variable will be an empty string if no homePage field is set in the package.json, so we have to pensate for that:

<Router basename={window.PUBLIC_URL && window.PUBLIC_URL.length > 0 ? window.PUBLIC_URL : "/"}>
    {/* ... */}
</Router>

Since you are using create-react-app package you can use environment variable instead of "homepage":"/example-path" in your package.json:

1. create .env file in the root of your project.

2. add REACT_APP_HOME_PAGE='/example-path/' to the .env file

3. now you can access your env variable through process.env.REACT_APP_HOME_PAGE in your app like the following:

   <Router basename={process.env.REACT_APP_HOME_PAGE}>
   

I don't know where is the location of your Router file but you can try to import it as json in src/index.js file that created by create-react-app cli app like below;

import myPackageJson from '../package.json';

or

import { homepage } from '../package.json';