Create-react-app: Document react router basename for relative builds

Created on 22 Jun 2017 · 20Comments · Source: facebook/create-react-app

Hi ,

I have created a demo project and deployed to Apache server but React Routes are not working. When i click on product it should go to "/product" but here it shows object not found. Could you please give permanent solution for this.

up for grabs! starter question documentation

Source

jsk548

All 20 comments

Are you using React Router?

If so, I'd check the configuration. Also you'll need to catch all your path requests to go to index.html so the router can take over.

Are you able to share your code?

notrab on 22 Jun 2017

Have you done https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing ?
tldr creating .htaccess file beside index.html with this content usually do it to me.

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

viankakrisna on 22 Jun 2017

I'll go ahead and close this because we have a section in our documentation which explains how to do this.
@viankakrisna has been kind enough to copy this section for you here. 😄

Timer on 22 Jun 2017

👎2

Hi ,
I tried with that also . default page is showing . when we route to other pages it shows "object not found"

jsk548 on 23 Jun 2017

@jsk548 sadly, I cannot help much with that information.

Do you have mod_rewrite extension enabled?
What's the actual response that is coming from the server? (a screenshot of dev tools network tab would be sufficient) Is it 200 or 500?
Can you share the URL where the app deployed?
Do you have access to support for maintaining the server?
Can you configure the Apache vhost file?

viankakrisna on 23 Jun 2017

Further more, here is what i found.

i have deployed as - demo1.gd.com/cliq - (which serves the index)
but i have fouind that when i click on products it should take me to demo1.gd.com/cliq/products instead it takes me to demo1.gd.com/products
it is missing the cliq in the url - demo1.gd.com/cliq whch is the host

jsk548 on 23 Jun 2017

It means that you need to set homepage field in the package.json https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

viankakrisna on 23 Jun 2017

@viankakrisna samething happening. i added "homepage": "demo1.gd.com/cliq" in package.json no change from previous build. it takes me to demo1.gd.com/products

jsk548 on 23 Jun 2017

you need to update your link like this:

<Link to={`${process.env.PUBLIC_URL}/products`}>Products</Link>

@gaearon @Timer I think it's missing from docs? Also, do

<head>
  <base href="%PUBLIC_URL%">
  ...
</head>

in index.html will solve it?

viankakrisna on 23 Jun 2017

@jsk548 btw, I cannot access demo1.gd.com, is it a virtualhost?

viankakrisna on 23 Jun 2017

We're hesitant to put the public URL fix in the docs because it might be changing in the future. The HTML base tag looks promising. What kind of browser support does that have?

Timer on 23 Jun 2017

It's an old spec. So it's pretty well supported. It has gotcha though https://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag
mainly behavior of <a href="#blabla"> and crawlers are not really good with base tag enabled html

viankakrisna on 23 Jun 2017

I just found out that react router v4 supports basename on BrowserRouter though https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

viankakrisna on 23 Jun 2017

Oh sweet we should probably suggest the basename feature in react-router then.

Timer on 23 Jun 2017

Anybody want to send a doc PR?

gaearon on 26 Jun 2017

Let's open this because I think it's really important

Timer on 27 Jun 2017

Is there a solution guys?
I tried above solution you mentioned ${process.env.PUBLIC_URL}/products}>Products. But the thing process.env.PUBLIC_URL is always empty.

jsk548 on 27 Jun 2017

If you are using react router v4, just use the basename feature linked above. If not, can you share a reproducible example? It's easier to work with code rather than guessing what is wrong.

viankakrisna on 27 Jun 2017

Hi @viankakrisna ,
basename is working in localhost but not in apache server.
URL http://demo01.gendevs.com/mypro is showing home page.
but when i route to http://demo01.gendevs.com/mypro/contactus it shows 404 Object not found
https://www.dropbox.com/s/owax5grpvchg8b7/example_router4.zip?dl=0

jsk548 on 28 Jun 2017

aaah, you are using apache tomcat, the guide is specifically for Apache HTTP Server with support for .htaccess. For Apache Tomcat, I think this SO answer will help https://stackoverflow.com/a/41249464/4878474

viankakrisna on 28 Jun 2017

Was this page helpful?

0 / 5 - 0 ratings