javascript - example - Utilizar anclajes con react-router.

react router tutorial

Question

¿Cómo puedo usar react-router y tener un enlace para navegar a un lugar en particular en una página en particular? (por ejemplo /home-page#section-three )

Detalles :

Estoy usando react-router en mi aplicación React.

Tengo una barra de navegación de todo el sitio que necesita vincularse a partes particulares de una página, como /home-page#section-three .

Así que incluso si está en say /blog , al hacer clic en este enlace se cargará la página de inicio, con la sección tres en la vista. Así es exactamente como funcionaría un <a href="/home-page#section-three> estándar.

Nota : Los creadores de react-router no han dado una respuesta explícita. Dicen que está en progreso y, mientras tanto, utilizan las respuestas de otras personas. Haré todo lo posible para mantener esta pregunta actualizada con el progreso y las posibles soluciones hasta que surja una dominante.

Investigacion

Cómo utilizar enlaces de anclaje normales con react-router

Esta pregunta es de 2015 (hace 10 años en tiempo de reacción). La respuesta más votada dice usar HistoryLocation lugar de HashLocation . Básicamente, eso significa almacenar la ubicación en el historial de la ventana, en lugar de en el fragmento de hash.

Las malas noticias son ... incluso usando HistoryLocation (lo que la mayoría de los tutoriales y documentos dicen que hacer en 2016), las etiquetas de anclaje aún no funcionan.

https://github.com/ReactTraining/react-router/issues/394

Un hilo en ReactTraining acerca de cómo usar enlaces de ancla con react-router. Esta no es una respuesta confirmada. Tenga cuidado ya que la mayoría de las respuestas propuestas están desactualizadas (p. Ej., Utilizando la sección "hash" en <Link> )

Answer 1

Aquí hay una solución que he encontrado (octubre de 2016). Es compatible con todos los navegadores (probado en ie, ff, chrome, mobile safari, safari).

Puede proporcionar una propiedad onUpdate a su enrutador. Esto se llama cada vez que una ruta se actualiza. Esta solución usa la propiedad onUpdate para verificar si hay un elemento DOM que coincida con el hash, y luego se desplaza hasta que se completa la transición de la ruta.

Debe utilizar browserHistory y no hashHistory.

La respuesta es por "Rafrax" en este https://github.com/ReactTraining/react-router/issues/394 .

Agregue este código al lugar donde define <Router> :

import React from ''react'';
import { render } from ''react-dom'';
import { Router, Route, browserHistory } from ''react-router'';

const routes = (
  // your routes
);

function hashLinkScroll() {
  const { hash } = window.location;
  if (hash !== '''') {
    // Push onto callback queue so it runs after the DOM is updated,
    // this is required when navigating from a different page so that
    // the element is rendered on the page before trying to getElementById.
    setTimeout(() => {
      const id = hash.replace(''#'', '''');
      const element = document.getElementById(id);
      if (element) element.scrollIntoView();
    }, 0);
  }
}

render(
  <Router
    history={browserHistory}
    routes={routes}
    onUpdate={hashLinkScroll}
  />,
  document.getElementById(''root'')
)

Si te sientes perezoso y no quieres copiar ese código, puedes usar Anchorate, que simplemente define esa función para ti. https://github.com/adjohnson916/anchorate

Answer 2

El problema con https://.com/a/40280486/515585 veces es que el elemento con el id todavía se representa o carga si esa sección depende de alguna acción asíncrona. La siguiente función intentará encontrar el elemento por id, navegar hasta él y volver a intentarlo cada 100 ms hasta que alcance un máximo de 50 reintentos:

scrollToLocation = () => {
  const { hash } = window.location;
  if (hash !== '''') {
    let retries = 0;
    const id = hash.replace(''#'', '''');
    const scroll = () => {
      retries += 0;
      if (retries > 50) return;
      const element = document.getElementById(id);
      if (element) {
        setTimeout(() => element.scrollIntoView(), 0);
      } else {
        setTimeout(scroll, 100);
      }
    };
    scroll();
  }
}

Answer 3

Simplemente evite usar el enrutador de reacción para el desplazamiento local:

document.getElementById(''myElementSomewhere'').scrollIntoView() 

Answer 4

Una alternativa: react-scrollchor https://www.npmjs.com/package/react-scrollchor

react-scrollchor: un componente React para desplazarse a enlaces #hash con animaciones suaves. Scrollchor es una mezcla de Scroll y Anchor

NOTA: No utiliza react-router.

Answer 5

React Router Hash Link funcionó para mí. Fácil de instalar e implementar:

$ npm install --save react-router-hash-link

En tu component.js importarlo como enlace:

import { HashLink as Link } from ''react-router-hash-link'';

Y en lugar de usar un ancla <a> , use <Link> :

<Link to="home-page#section-three>Section three</Link>

NOTA: usé HashRouter lugar del Router :