javascript - react - ¿No puedes entender History.js, necesitas simplificarlo?

pushstate w3schools

Question

Soy bastante nuevo en la programación, y estoy haciendo un sitio AJAX con la ayuda de jQuery.

Busqué un poco en busca de un controlador de historial AJAX, y pensé que History.js parece ser el mejor / más actualizado.

Cada uno de mis botones de menú tiene sus propias ID únicas (#homeBtn, #featuresBtn, #pricingBtn), y actualmente tienen este aspecto

<a href="#home" class="homeMainMenuButton" id="homeBtn"><div class="homeMainMenuButtonText">Home</div></a>

¿Puede alguien darme un ejemplo (preferiblemente en jsfiddle) sobre cómo implementaría History.js?

Parece que no puedo captar ninguno de los ejemplos dados por el autor, y simplemente necesito una versión simplificada = b

Si necesita más información, por favor hágamelo saber y gracias!

Answer 1

Creo que la versión "simplificada" que necesitas es una abstracción del enrutador. He escrito uno simple para mis propios propósitos, llamado StateRouter.js . Básicamente se encarga de dirigir las URL admitidas por su aplicación a las funciones correctas, incluso puede definir partes de parámetros de las rutas (de modo que, por ejemplo, la parte ''id'' de http://example.com/persons/id convierte en un parámetro de función) .

Este código de ejemplo simple debería demostrar cómo se usa:

var router = new staterouter.Router();
// Configure routes
router
  .route(''/'', getHome)
  .route(''/persons'', getPersons)
  .route(''/persons/:id'', getPerson);
// Perform routing of the current state
router.perform();
// Navigate to the page of person 1
router.navigate(''/persons/1'');

Aquí hay un pequeño fiddle que he inventado para demostrar su uso.

Answer 2

Siga las instrucciones aquí: https://github.com/browserstate/ajaxify

Cambie sus enlaces a los enlaces tradicionales href="#home" a href="/home" - asegúrese de que http://mywebsite.com/home funcione. Esto es todo acerca de la graduación elegante.