React JS 父路由添加exact后嵌套路由组件无法渲染问题求助

exact 属性的作用是要求路由的路径与当前URL 完全匹配 才会触发对应组件渲染。你给 /shop 对应的Route添加exact之后：

• 当URL为 /shop 时，路径完全匹配，Shop组件正常渲染
• 当URL跳转至 /shop/two 时，路径和 /shop 不完全匹配，Shop组件不会被渲染，自然Shop组件内部定义的子路由也不会生效，Two组件无法渲染。

根据你的业务需求可以选择以下两种常用方案：

1. 移除父级路由的exact属性
   如果你的需求是 /shop 路径下展示Shop组件基础内容，/shop/two 路径下同时展示Shop基础内容和Two子组件，直接修改App组件内的路由代码即可：

<Route path='/shop' component={Shop} />

如果需要在 /shop 根路径下展示专属的默认内容，可以在Shop组件内部新增一条带exact的子路由，匹配 ${path} 路径来渲染默认内容。

2. 调整路由顺序适配独立子组件场景
   如果Two组件不需要复用Shop组件的基础布局，你可以把更精确的子路由路径放在Switch的靠前位置，父级路由放在后面，保留父级的exact属性也能正常运行：

<BrowserRouter>
  <Switch>
    <Route path='/shop/two' component={Two} />
    <Route exact path='/shop' component={Shop} />
    {/* 其他业务路由 */}
  </Switch>
</BrowserRouter>

内容的提问来源于stack exchange，提问作者Saeed