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。

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

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

一）

<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>
        )
    }
}