javascript - react-router:嵌套路由应该渲染 IndexRoute 组件的子组件还是应该渲染智能父(IndexRoute)组件？

Question

我的问题很简单。然而，作为 React 新手，以及所有这些路由内容，我不确定如何正确使用嵌套路由。

如果我有一个“lookbook”页面存储在父 Lookbook.js 组件中，我知道我的 IndexRoute 将呈现 Lookbook.js。像这样的事情:

<Route path="lookbook">
  <IndexRoute component={Lookbook}/>
</Route>

假设 Lookbook 是一个照片源，单击其中一张照片将打开一个包含扩展照片和额外数据的模式。我们将这个扩展的照片模式组件称为 PhotoDetailsModal.js(它是 Lookbook.js 的子组件)。我想创建一条路线来加载 Lookbook 并自动打开特定照片，从而使我能够提供特定照片的可共享 URL。

使用嵌套路由完成上述任务的正确方法是什么？

我的第一个未知数与路线本身有关，它看起来像:

A)

<Route path="lookbook">
  <IndexRoute component={Lookbook}/>
  <Route path=":photoIdentifier" component={Lookbook}/>
</Route>

或

B)

<Route path="lookbook">
  <IndexRoute component={Lookbook}/>
  <Route path=":photoIdentifier" component={PhotoDetailsModal}/>
</Route>

基本上，对于我的任何动态嵌套路由，我是否应该渲染父组件 Lookbook.js 并且让它足够智能以注意到 URL 包含 photoID 或者我可以以某种方式渲染 PhotoDetailsModal明确地显示在 Lookbook 之上？

选项 B 似乎更接近最佳解决方案，但是如果我想在父 Lookbook.js 组件中收集所有数据，选项 A 不是更好吗？

寻找有关此类用例的最佳实践的任何见解。

Answer 1

您应该废弃 IndexRoute 并使用常规路由来嵌套模式。

// Routes
<Route path="/" component={Application}>
    <Route path="lookbook" component={Lookbook}>
        <Route path=":photoIdentifier" component={PhotoDetailsModal} />
    </Route>
</Route>



// Lookbook.jsx
class Lookbook extends Component {
    constructor() {
        this.state = {}
    }
    render() {
        return (
            <div>
                <h1>This is the look up page</h2>
                <h2>Renders a modal if children in props</h2>
                {this.props.children}
            </div>
        )
    }
}