Как создать список / подробный вид с помощью reach / router

Question

Поскольку reach/router не поддерживает необязательные параметры , как бы вы go отнеслись к созданию такого представления?

┌────────────────┐┌────────────────────────────────────────────────┐
│ ┌────────────┐ ││                                                │
│ │   Book 1   │ ││  Book 2                                        │
│ └────────────┘ ││  Name: Unknown knowns                          │
│ ┌────────────┐ ││  Author: Donald                                │
│ │ √ Book 2   │ ││  Year: 2001                                    │
│ └────────────┘ ││  ISBN: 666                                     │
│ ┌────────────┐ ││                                                │
│ │   Book 3   │ ││                                                │
│ └────────────┘ ││                                                │
│ ┌────────────┐ ││                                                │
│ │   Book 4   │ ││                                                │
│ └────────────┘ ││                                                │
│ ┌────────────┐ ││                                                │
│ │   Book 5   │ ││                                                │
│ └────────────┘ ││                                                │
└────────────────┘└────────────────────────────────────────────────┘

Слева находится список Books, который должен быть представлен либо:

• в /books
• в /books/:isbn

Справа в поле отображается Detail s книги, если на /books/:isbn, и она показывает пустое поле, если на /books.

Answer 1

Просто разобрался. Это можно сделать с помощью встроенных маршрутизаторов и подстановочных знаков , например:

function App() {
  return (
    <Router>
      <Books path='/books/*' />
    <Router>
  );
}

function Books() {
  return (
    // ... left-side list here
    <Router>
      <BookDetail path=':isbn' />
    <Router>
  );
}