如何使用reach/router创建列表/详细信息视图

Question

由于reach/router不支持可选参数，您将如何创建这样的视图？

┌────────────────┐┌────────────────────────────────────────────────┐
│ ┌────────────┐ ││                                                │
│ │   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

在右侧，如果在/books/:isbn，则该框显示一本书的Details；如果在/books，则显示一个空框。

Answer 1

刚刚想好了。这可以通过嵌入式路由器和通配符来完成，如：

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