Параметры маршрута и навигация

Параметр маршрута — изменяемая часть адреса, например номер статьи в /posts/7. Один маршрут с параметром обслуживает все статьи сразу, а компонент читает значение параметра и показывает нужную.

Маршрут с параметром

Параметр обозначается двоеточием. Добавьте маршруты в src/index.jsx рядом с остальными:

// src/index.jsx
<Route path="/posts" component={Posts} />
<Route path="/posts/:id" component={Post} />

Не забудьте импортировать Posts и Post из папки src/pages.

Чтение параметра

// src/pages/Post.jsx
import { useParams } from '@solidjs/router';
 
export default function Post() {
  const params = useParams();
 
  return <h1>Статья номер {params.id}</h1>;
}

Откройте http://localhost:3000/posts/7 — появится «Статья номер 7». Значения параметров всегда строки.

params — реактивный объект. При переходе с /posts/7 на /posts/8 компонент не создаётся заново, а params.id просто меняет значение. Поэтому, как и с пропсами, читайте params.id там, где он нужен, а не сохраняйте в переменную.

Ссылки на статьи

Список статей строит ссылки с номером в адресе:

// src/pages/Posts.jsx
import { For } from 'solid-js';
import { A } from '@solidjs/router';
 
const posts = [
  { id: 1, title: 'Первая статья' },
  { id: 2, title: 'Вторая статья' },
];
 
export default function Posts() {
  return (
    <ul>
      <For each={posts}>
        {(post) => (
          <li>
            <A href={`/posts/${post.id}`}>{post.title}</A>
          </li>
        )}
      </For>
    </ul>
  );
}

На http://localhost:3000/posts видны две ссылки; щелчок открывает страницу статьи. В следующем уроке список будет загружаться с сервера.

Переход из кода

Иногда перейти нужно не по ссылке, а после действия — например, после удаления статьи. Для этого есть useNavigate:

// src/pages/Post.jsx
import { useParams, useNavigate } from '@solidjs/router';
 
export default function Post() {
  const params = useParams();
  const navigate = useNavigate();
 
  return (
    <div>
      <h1>Статья номер {params.id}</h1>
      <button onClick={() => navigate('/posts')}>К списку</button>
    </div>
  );
}

Нажатие на кнопку возвращает к списку статей.

Другие функции

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

Деструктурировать параметры: const { id } = useParams(). Значение прочитается один раз, и при переходе со статьи 7 на статью 8 через ссылку на странице останется номер 7. Обращайтесь к params.id прямо в JSX и в функциях.