Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

84
Vistas
How to publish a react app in any directory?

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

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I managed to do this.

  1. Base Url
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/';

  1. Routes
<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} />} />
  1. Links
<Link to={`${baseUrl}home`}>Home</Link>
  1. .htaccess goes into the same directory of the react index.html
# begin redirect to index.html
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]
# end redirect to index.html
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos