I have a react app which I may want to run from different directories possibly on multiple hosts.
https://myhost.com/relative/path/1/index.html
https://myhost.com/relative/path/2/index.html
https://myhost2.com/relative/path/1/index.html
I notice when I click on a home link URL always shows
https://myhost.com/home instead of https://myhost.com/relative/path/1/home
Is this expected behavior?
<Link to={`${this.settings.getClientBaseUrl()}home`}>Home</Link>
<Route exact path={`${this.settings.getClientBaseUrl()}`} element={<HomePage parent={this.parent} />} />
I am looking for a definitive way or explanation on how to have the URL look like
https://myhost.com/relative/path/1/home
instead of
https://myhost.com/home
I managed to do this.
let baseUrl = window.location.pathname;
baseUrl = \`${baseUrl.split('/').slice(0, -1).join('/')}/\`; // get dir of filepath
If you put the output of build in https://example.com/path/to/script baseUrl = '/path/to/script/';
<Route exact path={`${baseUrl}`} element={<HomePage props={props} />} />
<Route exact path={`${baseUrl}index.html`} element={<HomePage props={props} />} />
<Route exact path={`${baseUrl}home`} element={<HomePage props={props} />} />
<Link to={`${baseUrl}home`}>Home</Link>
# begin redirect to index.html
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]
# end redirect to index.html