React Router Dom 子路由答案

【问题标题】：React Router Dom child routesReact Router Dom 子路由
【发布时间】：2020-02-25 17:07:56
【问题描述】：

我正在创建一个小型反应应用程序，我在根组件上放置了这样的路由

return (
    <div>
        <Header />
        <Route exact path='/' component={Homepage}/>
        <Route exact path='/shop' component={Shop}/>
        <Route exact path='/shop/:category' component={Category}/>
    </div>
)

我想将/shop/:category 路由作为子路由放在 Shop 组件上，如下所示

render() {
    const {match} = this.props
        return (
            <div>
                <Route exact path={`${match.path}`} component={Collection}/>
                <Route exact path={`${match.path}/:category`} component={Category}/>
            </div>
        )
    }

当我这样做时，类别组件不会呈现，但是当我将路由放在它确实呈现的 App 组件上时它会呈现。我已经记录了匹配对象，这很好，因为即使使用相同的集合页面也在呈现，但无论出于何种原因，第二条路线都不会呈现。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

exact 属性仅在当前位置路径与提供的path 属性相同时才会渲染路线。

当您当前的位置路径在/shop/:category 中时，它不会呈现<Route exact path='/shop' component={Shop}/>，因为/shop/:category !== /shop

尝试删除内部包含子路由的组件的 exact 属性

      <div>
        <Header />
        <Route exact path='/' component={Homepage}/>
        <Route path='/shop' component={Shop}/>
      </div>

【讨论】：