reactjs - 如何使用到达/路由器创建列表/详细信息视图

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

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

标签： reactjsreach-router

Answer 1

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

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

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