如何使用 reach/router 创建 List/Detail 视图

Question

自 reach/router doesn't support optional params 以来，您将如何创建这样的视图？

┌────────────────┐┌────────────────────────────────────────────────┐
│ ┌────────────┐ ││                                                │
│ │   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 一本书，如果在 /books/:isbn，如果在 /books，它显示一个空框。

Answer 1

刚刚弄明白了。这可以通过 Embedded Routers and Wildcards 来完成，例如：

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

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