React Router Dom — популярная библиотека, предоставляющая возможности навигации и маршрутизации для приложений React. Он позволяет разработчикам создавать одностраничные приложения с несколькими представлениями, обеспечивая плавную навигацию между различными компонентами или страницами. В сочетании с Storybook, средой разработки компонентов пользовательского интерфейса, React Router Dom становится еще более мощным, позволяя эффективно тестировать и разрабатывать логику маршрутизации. В этой статье мы рассмотрим различные методы использования React Router Dom с Storybook, сопровождаемые примерами кода.

1. Установка зависимостей.
   Чтобы начать, убедитесь, что в вашем проекте установлены React Router Dom и Storybook. Вы можете установить их с помощью npm или Yarn:

npm install react-router-dom
npm install @storybook/react @storybook/addon-actions @storybook/addon-links

2. Настройка React Router Dom в Storybook:
   Чтобы использовать React Router Dom с Storybook, вам необходимо соответствующим образом настроить истории Storybook. Вот пример того, как можно настроить маршрутизацию в Storybook:

// .storybook/preview.js
import { MemoryRouter } from 'react-router-dom';
export const decorators = [
  (Story) => (
    <MemoryRouter initialEntries={['/']}>
      <Story />
    </MemoryRouter>
  ),
];

3. Создание маршрутов.
   React Router Dom позволяет определять маршруты с помощью компонента <Route>. Вот пример того, как вы можете создавать маршруты с помощью React Router Dom:

import { BrowserRouter as Router, Route } from 'react-router-dom';
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
};

4. Навигация между маршрутами:
   React Router Dom предоставляет различные методы навигации между маршрутами. Вот несколько примеров:

import { Link, useHistory } from 'react-router-dom';
const Navigation = () => {
  const history = useHistory();
  const handleButtonClick = () => {
    history.push('/about');
  };
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
      <button onClick={handleButtonClick}>Go to About</button>
    </div>
  );
};

5. Доступ к параметрам маршрута.
   React Router Dom позволяет получить доступ к параметрам маршрута, что может быть полезно для динамической маршрутизации. Вот пример:

import { useParams } from 'react-router-dom';
const UserProfile = () => {
  const { username } = useParams();
  return <div>Welcome, {username}!</div>;
};

React Router Dom и Storybook — это мощная комбинация для разработки и тестирования логики маршрутизации в приложениях React. В этой статье мы рассмотрели процесс установки, настройку React Router Dom в Storybook, создание маршрутов, навигацию между маршрутами и доступ к параметрам маршрута. Используя возможности этих двух библиотек, вы можете создать надежные и эффективные системы маршрутизации для своих проектов React.

Не забудьте просмотреть документацию React Router Dom и Storybook, чтобы узнать о более продвинутых функциях и параметрах. Удачной маршрутизации!