Блог

Главная - Вопросы по программированию - Теги привязки не загружают компоненты мгновенно в Chrome при использовании #

Теги привязки не загружают компоненты мгновенно в Chrome при использовании #

#html #reactjs

#HTML #reactjs

Вопрос:

Я пытаюсь вызвать компоненты на той же странице из панели навигации в приложении react, используя теги привязки. Вот код:

 <li><a href="/#contact">Contact</a></li>

Компонент, который он должен вызывать, следующий:

 <div id="contact"></div>

В Chrome компоненты загружаются не сразу после нажатия на панель навигации. Браузер прокручивается вниз только после загрузки страницы. Однако эти теги привязки работают мгновенно в IE и FF. Я даже пытался использовать Lazy и Suspense для оптимизации производительности загрузки приложений. Есть предложения или идеи?

Комментарии:

1. Вы пробовали использовать React router?

2. Возможно ли перенаправить компоненты на той же странице с помощью react-router? @axtck

3. Да, и с небольшой задержкой, если хотите, я мог бы вам это объяснить

4. Да, если бы вы могли привести пример, это было бы здорово. @axtck

5. Вы проверили пример, который я опубликовал, используя React router? Подумайте о том, чтобы оставить отзыв, приветствия

Ответ №1:

Я предлагаю вам попробовать React Router

Сначала установите пакеты с помощью npm или yarn:

npm install react-router-dom или yarn add react-router-dom

Что мне нравится делать для обеспечения возможности маршрутизации, так это упаковывать мой <App /> компонент в <BrowserRouter /> компонент из React Router (в index.js ) вот так:

 import { BrowserRouter } from 'react-router-dom'; // import BrowserRouter

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Не забудьте import о модуле.

Теперь вы можете использовать <Switch /> компонент из React Router в том месте, где вы хотели бы отобразить свои компоненты, посмотрите на этот пример для простого блога:

 <Switch>
  {/* blogs routes */}
  <Route path="/blogs/create" component={CreateBlog} />
  <Route path="/blogs/:blogId" component={BlogPostList} />
  <Route path="/blogs" component={BlogList} />

  {/* redirect to blogs when visiting wrong route */}
  <Redirect to="/blogs" />
</Switch>

Как вы можете видеть, внутри <Switch /> вы можете указать маршруты с помощью <Route /> компонента и с соответствующим path и component , который вы хотели бы отобразить. Вы также можете указать a <Redirect /> для перенаправления пользователя при вводе несуществующего маршрута. Также обратите внимание, что наименее конкретный маршрут (/blogs ) следует за более конкретным маршрутом (/blogs/create ), это связано с тем, что маршрутизатор прекратит поиск после первого совпадения.

Чтобы перейти к определенному маршруту из кода, вы можете использовать useHistory() from React Router, подобный этому примеру, который перемещается по нажатию кнопки. history.push('route') отправит маршрут и отобразит компонент, указанный для этого маршрута.

 import { useHistory } from "react-router-dom";

export default function App() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/blogs/1");
  };

  return (
    <div>
      <button onClick={handleClick}>Go to blog 1</button>
    </div>
  );
}

Ответ №2:

Для локальных / одностраничных ссылок на идентификаторы не используйте косую черту в атрибуте a тега href (например href="/#contact" ), а только хэш, например: href="#contact"