search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.54k stars 26.79k forks source link

Document react router basename for relative builds #2593

Closed jsk548 closed 7 years ago

jsk548 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

viankakrisna commented 7 years ago

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

  1. Do you have mod_rewrite extension enabled?
  2. 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?
  3. Can you share the URL where the app deployed?
  4. Do you have access to support for maintaining the server?
  5. Can you configure the Apache vhost file?
jsk548 commented 7 years ago

Further more, here is what i found.

  1. i have deployed as - demo1.gd.com/cliq - (which serves the index)
  2. 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
  3. it is missing the cliq in the url - demo1.gd.com/cliq whch is the host
viankakrisna commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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

Timer commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

Timer commented 7 years ago

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

gaearon commented 7 years ago

Anybody want to send a doc PR?

Timer commented 7 years ago

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

jsk548 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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