我没有从下面的React Router获得docs:
但是现在Home无法参与路由,例如onEnter挂钩等 . 您在与帐户和语句相同的位置呈现,因此路由器允许您将Home作为具有IndexRoute的第一类路由组件 .
他在这里路由是什么意思?什么是onEnter挂钩?
由于 App 正在包装其他路由,因此匹配给定URL的路由将传递给 App 以通过 this.props.children 呈现 . 因此,如果您通过 {this.props.children || <Home/>} 之类的语句渲染 Home ,则不会 Home 挂钩 . 一个这样的钩子是 onEnter ,它在输入路线时触发回调 .
App
this.props.children
{this.props.children || <Home/>}
Home
onEnter
当您将 Home 定义为 IndexRoute 时,它是一个与 App 匹配的路径匹配的不同路线 . 这样,我们不需要 App 中的or子句,我们可以通过 {this.props.children} 渲染子路由
IndexRoute
{this.props.children}
docs here更直接一点:
想象一下,当URL为/时,我们想在App内部渲染另一个组件 . 目前,在这种情况下,App的render方法中的this.props.children是未定义的 . 我们可以使用<IndexRoute>指定“默认”页面 .
至于 onEnter docs here更好:
路由还可以定义一旦确认转换后调用的onEnter和onLeave挂钩 . 这些钩子对于各种事情很有用,例如在输入路径时需要auth并在路径卸载之前将东西保存到持久存储 .
2 回答
由于
App
正在包装其他路由,因此匹配给定URL的路由将传递给App
以通过this.props.children
呈现 . 因此,如果您通过{this.props.children || <Home/>}
之类的语句渲染Home
,则不会Home
挂钩 . 一个这样的钩子是onEnter
,它在输入路线时触发回调 .当您将
Home
定义为IndexRoute
时,它是一个与App
匹配的路径匹配的不同路线 . 这样,我们不需要App
中的or子句,我们可以通过{this.props.children}
渲染子路由docs here更直接一点:
至于
onEnter
docs here更好: