javascript - paginas - Servir otra página(independiente) o archivo estático en un sitio web creado con reaccionar

enlazar javascript con html

Question

Tengo un sitio web creado con reaccionar, que utiliza react-router. Para alguna ruta quiero servir otra página o archivo estático, pero como todas las solicitudes se reenvían para que el enrutador reaccione, no funciona.

por ejemplo

www.myapp.com/sitemap.xml
www.myapp.com/something.html

^ estos enlaces funcionan por primera vez, pero una vez que cargo el sitio web, entonces no funciona, ya que todos solicitan ir a través del router de reacción.

Cualquier solución para que funcione todo el tiempo. Gracias.

Editar

Estoy usando el servidor apache que está configurado para redirigir todas las solicitudes a index.html, supongo que este es el motivo de este comportamiento. Esta es mi configuración, pero no sé cómo arreglar esto.

Options -MultiViews
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Actualizacion Probé la solución sugerida en la respuesta.

Mis rutas tienen este aspecto, para something.html estoy cargando el componente ServerLoad

<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/about" component={About} />
<Route path="something.html" component={ServerLoad} />
<Route component={NoMatch} />
</Switch>

En la función componentDidMount del componente ServerLoad, hice esto. Pero no funciona.

componentDidMount() {
window.location.reload(true);
}

Más , he configurado este proyecto utilizando create-react-app y lo sirvo por un servidor Express ( como este ). No estoy seguro si necesito hacer alguna configuración allí para servidor otros archivos estáticos.

Answer 1

Es un comportamiento no deseado de ServiceWorker.js. Use el comentario a continuación y cámbielo en index.js de su proyecto React y debería funcionar.

import { unregister } from ''./registerServiceWorker'';
unregister();

https://github.com/facebookincubator/create-react-app/issues/2715

Answer 2

Esto debería funcionar:

const reload = () => window.location.reload();
<Router>
// all your routes..
...
// Your special routes..
<Route path="/sitemap.xml" onEnter={reload} />
<Route path="/something.html" onEnter={reload} />
</Router>

Entonces, creo que esto debería ser bastante claro lo que hace;)

Actualizar:

Si esta es una opción, simplemente puede poner el atributo target = "_ blank" en su <Link>

En mi opinión, esto es incluso mejor desde la perspectiva de UX, porque si estas rutas no forman parte de su aplicación principal, el usuario puede simplemente cambiar la pestaña después de visitar esas páginas especiales .

Answer 3

Use Switch combinado con un componente NoMatch , combinado con la solución de webdeb:

<Router>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/admin" component={Admin} />
<Route component={NoMatch} />
<Route onEnter={() => window.location.reload()} />
</Switch>
</div>
</Router>

Esto coincidirá con las rutas, mostrará 404 si no existe un href válido y mostrará un archivo o algo si es un href válido.