Блог

Я перехожу к маршруту, подобному:

<Link to="/products#product5">Go to projects and focus id</Link> цель этой ссылки — перейти на страницу и сосредоточиться на идентификаторе. но этого не происходит. вместо этого я products перехожу на страницу, но не фокусируюсь на id ней. каков правильный способ справиться с этим? требуется только для указанной ссылки.

вот моя попытка: Hello.tsx

 import React from "react";
import { Link } from "react-router-dom";

export default ({ name: string }) => (
  <div>
    <h1>Hello {name}!</h1>
    <Link to="/products#product5">Go to projects and focus id</Link>
  </div>
);
 

вот страница продуктов:

 import React from "react";
import { Link, Route, Switch, Redirect } from "react-router-dom";

import "./products.scss";

const Shoes = React.lazy(() => import("./shoes/shoes.component"));
const Cloths = React.lazy(() => import("./cloths/cloths.component"));

export default class Products extends React.Component {
  render() {
    return (
      <div>
        <header>
          <Link to="/products/shoe">Shoes</Link>
          <Link to="/products/cloths">Cloths</Link>
        </header>
        <h1>Products page</h1>
        <main>
          <Switch>
            <Redirect exact from="/products" to="/products/shoe" />
            <Route path="/products/shoe">
              <Shoes />
            </Route>
            <Route path="/products/cloths">
              <Cloths />
            </Route>
          </Switch>
        </main>
      </div>
    );
  }
}
 

страница загрузки по умолчанию: где идентификатор должен отображаться для просмотра

 import React from "react";
import "./shoes.style.scss";

export default class Shoes extends React.Component {
  render() {
    return (
      <div className="list-shoes">
        <h1>I am from shoe page </h1>
        <span>Product-1</span>
        <span>Product-2</span>
        <span>Product-3</span>
        <span>Product-4</span>
        <span>Product-5</span>
        <span>Product-6</span>
        <span>Product-7</span>
        <span>Product-8</span>
        <span id="product9">Product-9</span>
        <span>Product-10</span>
      </div>
    );
  }
}
 

Живая демонстрация

каков правильный способ сделать это? Заранее спасибо.

Если вы попытаетесь получить доступ к продукту непосредственно с /products/shoe маршрута, например /products/shoe#product9 , вы можете увидеть, что ваш текущий подход работает нормально. Идентификатор product9 существует в вашем Shoes компоненте, и поэтому он автоматически фокусируется при вводе этого маршрута.

Однако проблема с маршрутом, который вы указываете в вопросе, вызвана этим перенаправлением здесь:

 <Redirect exact from="/products" to="/products/shoe" />
 

Как вы можете видеть в приведенном вами примере, когда вы пытаетесь получить доступ /products#product5 , происходит то, на что вы автоматически перенаправляетесь /products/shoe . Параметр hash не сохраняется во время этого перенаправления, поэтому страница не прокручивается до идентификатора, включенного в исходный URL (больше нет идентификатора для фокусировки).

Если вы хотите, чтобы это работало, вам нужно вручную получить значение хэша и добавить его к целевому URL-адресу перед запуском перенаправления. Вы можете сделать это, используя render метод Route компонента для доступа к location объекту, который предоставляет React Router, а затем использовать его для создания URL-адреса, на который вы хотите перенаправить.

 <Route exact path="/products" 
  render={({ location }) => <Redirect to={{
    pathname: '/products/shoe',
    hash: location.hash,
  }}
/>
 

С помощью этого фрагмента кода значение хэша теперь будет добавлено к новому URL-адресу, поэтому идентификатор элемента, на который нужно обратить внимание, больше не должен теряться при перенаправлении. Возвращаясь к вашему примеру path, /products#product5 теперь перенаправление на /products/shoe#product5 вместо /products/shoe .