Solid Router: установка и маршруты

Маршрутизатор (router) показывает разные компоненты в зависимости от адреса в браузере: / — главная, /posts — список статей, /about — страница «О блоге». Переход между страницами происходит без перезагрузки. Официальный маршрутизатор для Solid — пакет @solidjs/router, курс описывает версию 0.15.

Установка

В папке проекта blog выполните:

npm install @solidjs/router

Страницы

Страницы — это обычные компоненты. Принято класть их в папку src/pages:

// src/pages/Home.jsx
export default function Home() {
  return <h1>Главная блога</h1>;
}

// src/pages/About.jsx
export default function About() {
  return <h1>О блоге</h1>;
}

Маршруты

Маршруты описываются в точке входа, вместо прямого вывода App:

// src/index.jsx
/* @refresh reload */
import { render } from 'solid-js/web';
import { Router, Route } from '@solidjs/router';
import './index.css';
import Home from './pages/Home';
import About from './pages/About';
 
render(
  () => (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  ),
  document.getElementById('root'),
);

Откройте http://localhost:3000 — появится «Главная блога», а по адресу http://localhost:3000/about — «О блоге».

Общий макет и ссылки

Шапка и меню нужны на каждой странице. Компонент, переданный в атрибут root у Router, оборачивает все страницы, а текущая страница приходит в props.children. Сделайте макетом App:

// src/App.jsx
import { A } from '@solidjs/router';
 
export default function App(props) {
  return (
    <>
      <nav>
        <A href="/" end>Главная</A> | <A href="/about">О блоге</A>
      </nav>
      <main>{props.children}</main>
    </>
  );
}

В src/index.jsx добавьте import App from './App'; и замените <Router> на <Router root={App}>. Теперь меню видно на каждой странице, а щелчок по ссылке меняет содержимое main без перезагрузки.

Компонент A

Без end ссылка на / была бы активной на любой странице, потому что все адреса начинаются с /.

Страница 404

Маршрут с * подходит к любому адресу. Поставьте его последним:

// src/index.jsx
<Route path="*404" component={NotFound} />

Компонент NotFound создайте в src/pages/NotFound.jsx так же, как About. Адрес вроде /abc покажет его.

Частая ошибка

Ставить внутренние ссылки обычным тегом a. Ссылка сработает, но браузер перезагрузит всё приложение и сбросит его состояние. Для переходов внутри сайта используйте A из @solidjs/router.