Configuring react router for apache subdomain

Question

Hello I am experimenting with react router, I have developed 3 "pages" and I want to deploy this app to a server at a subdomain. My problem is that I cannot make the react router to work as I expected. I want my app to work at a particular URL. I am not sure if have understood the principles of routing correctly. I am making my test on XAMP. I have implemented a basic react router through browserRouter but I have several issues.

To begin with here is my main component and the routing:

<Router >
    <nav className='blue-grey darken-3'>
      <div className="blue-grey darken-3nav-wrapper">
        <ul id="nav-mobile" className="">
          <li><Link to="/">Home</Link></li>
          <li><Link to="/creation">Creation form</Link></li>
        </ul>
      </div>
    </nav>

    <div className='mainContainer'>
        <Switch>
          <Route exact path="/">
            <HomePageComponent/>
          </Route>
          <Route exact path="/user/:id">
            <UserPageComponent/>
          </Route>
          <Route path="/creation">
            <UserCreationPageComponent/>
          </Route>
        </Switch>
    </div>
</Router>

I have deployed my app to a localhost subdomain called

/reactTest

so the I access the app using

localhost/reactTest

If I navigate around using the links in the app everything works as expected. However I have several problems:

I was expecting that if I would access a url like directly on the browser localhost/reactTest/creation, I would be navigated to the creation component. Instead I receive a 404 error.

Also, when I navigate using the app's links I see that the domain is discarded. So for example when I click the creation page link, instead of navigating to localhost/reactTest/creation I am navigated to localhost/creation which works fine, though it doesn't seem correct to me. Again if try to navigate to it be accessing it directly from the browser it doesn't work.

I also tried to set basename to the router by replacing <Router > with <Router basename="/reactTest">. That solved the issue with the 'vanishing' subdomain so I was correctly navigated to a page withought losing the 'reactTest' part of the url, but accessing it outside the app still isn't possible. Is all that the expected behaviour? Is there a way to achieve navigation the way I describe it above?

Thank you in advance,

It's important to remember that React is a "single" page application, usually at `index.html`. But your Apache server doesn't know this so it'll try to direct requests to other pages to other files that, in your case, don't exist. For example, it'll try to direct a reuqest of `/creation` to the file `creation/index.html`. You can fix this either by using some [Apache config](https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042) or by using a _hash router_. — Nick, Dec 29 '20 at 18:49
Does this answer your question? [Can I set a base route in react-router](https://stackoverflow.com/questions/38196448/can-i-set-a-base-route-in-react-router) Additionally, if you're using Create React App, just set the base path in your package.json and rebuild: `"homepage": "/reactTest"` — cbr, Dec 29 '20 at 18:49
@cbr I think this question is about push state issues right? — Nick, Dec 29 '20 at 18:51
If anything I think this might be the redundant question: https://stackoverflow.com/questions/44038456/how-to-setup-apache-server-for-react-route — Nick, Dec 29 '20 at 18:53
@Nick It's both, probably. He also wants to mount the app at the path `/reactTest` - the "redirect removes the subpath" issue is exactly because of a missing basePath. — cbr, Dec 29 '20 at 18:56
So from what you say I deduce that that functionality I want to achieve is impossible, right? — JmRag, Dec 29 '20 at 18:59

Configuring react router for apache subdomain

0 Answers0