Appearance
Пример: навигация блога
Header — пример компонента, которому нужен React Router, но не нужен MobX store.
Компонент
tsx
import { Link } from "react-router"
export const BlogHeader = () => (
<header>
<nav>
<Link to="/posts">Посты</Link>
<Link to="/posts/new">Новый пост</Link>
</nav>
</header>
)
BlogHeader.displayName = "BlogHeader"Где размещать
Если header используется как часть приложения:
txt
components/header/
BlogHeader.tsx
index.tsRouter layout может импортировать его:
tsx
import { Outlet } from "react-router"
import { BlogHeader } from "@/components/header"
export const MainLayout = () => (
<>
<BlogHeader />
<Outlet />
</>
)
MainLayout.displayName = "MainLayout"Почему здесь нет store
Не добавляйте MobX только потому, что компонент «важный». Если header только создаёт ссылки, React Router уже решает его задачу.