Есть ли способ перенаправить на хэш URL-адреса по умолчанию с React Router?

Question

Я использую React Router 5.

У меня есть путь /item/:id. Когда я перехожу по этому пути, я хочу иметь возможность загрузить страницу с хеш-идентификатором по умолчанию. i.e. /item/:id#123

Для большего контекста у меня есть список шагов на моей странице, связанных с элементом. Каждый раз, когда пользователь выбирает другой шаг, хэш изменяется соответственно следующим образом:

step 1 -> /item/123#1
step 2 -> /item/123#2
step 3 -> /item/123#3

Вот примерная реализация кода моего компонента:

import { withRouter } from 'react-router-dom'
import steps from './steps'

const ItemPage = ({ history, location }) => {
  const { hash, pathname } = location
  const changeURLhash = idx => {
    history.push({ pathname: pathname, hash: idx.toString() })
  }

  return (
    <ul>
      {steps.map(step => (
        <li key={i} onClick={changeURLhash}>
          {step.title}
        </li>
      ))}
    </ul>
  )
}

Я могу изменить хэшпосле выбора шага, но при начальной загрузке страницы, когда ничего не было нажато, в пути URL нет хэша. Мне нужно изменить это, потому что шаг 1 выбран по умолчанию при загрузке страницы.

Каков наилучший способ сделать это? Заранее спасибо!

Answer 1

Без возможности увидеть ваш код трудно найти точное решение вашей проблемы. Тем не менее, я создал песочницу для вас, чтобы продемонстрировать, как вы можете это сделать.

https://codesandbox.io/s/gifted-sinoussi-5eomb

По существу, вашему Item компоненту требуется комбинация useState и useEffect

import React, { useState, useEffect } from "react";

const Item = ({ steps }) => {
  const [currentStep, setCurrentStep] = useState(1);

  useEffect(() => {
    const path = window.location.href;
    const step =
      path.indexOf("#") !== -1 ? path.slice(path.indexOf("#") + 1) : "";
    if (step) {
      setCurrentStep(step);
    }
  }, []);

  const handleOnClick = step => {
    setCurrentStep(step);
  };

  const createSteps = () => {
    return steps.map((step, index) => {
      return (
        <div
          className={step == currentStep ? "currentStep" : "step"}
          key={index}
          onClick={() => handleOnClick(step)}
        >
          <h4>Step: {step}</h4>
          <input />
        </div>
      );
    });
  };
  return <div>{createSteps()}</div>;
};

export default Item;

У вас есть состояние для отслеживаниятекущий шаг. И функция создания разметки для применения выделенного класса к активному элементу. Затем в useEffect() вы просто извлекаете номер шага (символ после #) и устанавливаете ваше состояние на это значение. Это переопределяет компонент, и создатель разметки применяет класс к этому шагу.

Answer 2

Я смог решить эту проблему с помощью history.replace в хуке useEffect.

Когда страница загружается и в URL нет идентификатора хеша, я заменяю текущий путь в стеке историис новым путем, содержащим хэш по умолчанию

useEffect(() => {
  if (!hash) history.replace({ pathname: pathname, hash: '0' })
}, [hash, history, pathname])

Использование здесь замены вместо push устраняет ненужную дополнительную запись, которая добавляется в стек истории.