Document react router basename for relative builds #2593

jsk548 · 2017-06-22T12:46:15Z

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.

notrab · 2017-06-22T13:57:49Z

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?

viankakrisna · 2017-06-22T15:39:38Z

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]

Timer · 2017-06-22T18:08:39Z

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. 😄

jsk548 · 2017-06-23T06:59:21Z

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

viankakrisna · 2017-06-23T07:20:18Z

@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?

jsk548 · 2017-06-23T07:36:05Z

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

viankakrisna · 2017-06-23T09:02:13Z

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

jsk548 · 2017-06-23T09:57:43Z

@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

viankakrisna · 2017-06-23T10:41:45Z

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 · 2017-06-23T10:45:42Z

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

Timer · 2017-06-23T15:43:34Z

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?

viankakrisna · 2017-06-23T17:42:05Z

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 · 2017-06-23T18:09:55Z

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

Timer · 2017-06-23T18:21:21Z

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

gaearon · 2017-06-26T15:46:34Z

Anybody want to send a doc PR?

Timer · 2017-06-26T22:30:30Z

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

jsk548 · 2017-06-27T11:13:25Z

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

viankakrisna · 2017-06-27T12:15:20Z

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.

jsk548 · 2017-06-28T11:22:08Z

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

viankakrisna · 2017-06-28T17:23:55Z

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

After a revelation in facebook#2593 (comment)

Fix facebook#2593

* Add more info about apache client side routing After a revelation in #2593 (comment) * Update README.md

* Add more info about apache client side routing After a revelation in facebook/create-react-app#2593 (comment) * Update README.md

* Add more info about apache client side routing After a revelation in facebook#2593 (comment) * Update README.md

* Docs for react-router v4 basename feature Fix #2593 * Update README.md * Update README.md * Update README.md * Update README.md

* Add more info about apache client side routing After a revelation in facebook/create-react-app#2593 (comment) * Update README.md