Как установить и использовать Reach Router для маршрутизации React

Чтобы установить библиотеку Reach Router, выполните следующие действия:

  1. Убедитесь, что на вашем компьютере установлены Node.js и npm (менеджер пакетов Node).

  2. Откройте терминал или командную строку.

  3. Перейдите в каталог вашего проекта.

  4. Для установки Reach Router выполните следующую команду:

    npm install @reach/router

    При этом пакет Reach Router и его зависимости будут установлены в ваш проект.

После установки Reach Router вы можете начать использовать его в своем приложении. Вот несколько методов, которые можно использовать с примерами кода:

Метод 1: базовая маршрутизация

import React from 'react';
import { Router, Link } from '@reach/router';
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;
const App = () => (
  <div>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
    <Router>
      <Home path="/" />
      <About path="/about" />
      <Contact path="/contact" />
    </Router>
  </div>
);
export default App;

Метод 2: параметры URL

import React from 'react';
import { Router, Link } from '@reach/router';
const User = ({ username }) => <h1>Welcome, {username}!</h1>;
const App = () => (
  <div>
    <nav>
      <Link to="/user/john">John</Link>
      <Link to="/user/jane">Jane</Link>
    </nav>
    <Router>
      <User path="/user/:username" />
    </Router>
  </div>
);
export default App;

Метод 3: вложенные маршруты

import React from 'react';
import { Router, Link } from '@reach/router';
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;
const Info = () => (
  <div>
    <h2>Info</h2>
    <Router>
      <About path="/info/about" />
      <Contact path="/info/contact" />
    </Router>
  </div>
);
const App = () => (
  <div>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/info/about">About</Link>
      <Link to="/info/contact">Contact</Link>
    </nav>
    <Router>
      <Home path="/" />
      <Info path="/info/*" />
    </Router>
  </div>
);
export default App;

Это всего лишь несколько примеров использования Reach Router. Он предоставляет множество дополнительных функций и возможностей для построения сложной маршрутизации в вашем приложении React.