Question

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

如果我在父 Lookbook.js 组件中存储了“lookbook”页面，我知道我的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>
        )
    }
}

react-router：嵌套路由是否应该呈现IndexRoute组件的子组件，还是应该呈现智能父组件（IndexRoute）？

1 个答案: