reactjs - react 路由器 v4。 "exact"prop 是否禁止任何嵌套路由？

Question

我注意到，如果我创建 <Route path={'/'} exact component={Profile} />我无法嵌套任何其他内部组件，只是因为该 Prop “exact”阻止任何匹配并停止渲染。

我想要构建的是一个带有个人资料和订单页面的简单应用程序。每个页面都有自己的侧边栏和一些订单项目列表。我在每个页面内使用嵌套路由来根据当前位置重新设计正确的顺序列表。为了使这个应用程序完美，我需要在起始位置渲染配置文件页面(例如“https://myapp.com”)。

我阅读了所有文档，唯一的解决方案是在 Route 组件中使用“exact”属性。但这是太脆弱的解决方案，因为如果我想使用嵌套路由进行侧边栏或订单列表定义。

是否有其他方法可以构建可以在“https://myapp.com”上显示“个人资料”页面的路由' 位置还允许我使用嵌套路由？

我当前的实现是下一个:

<Switch>
   <Route path={'/'} exact component={Profile} />
   <Route path={'/orders'} component={Orders} />
   <Route component={NotFound} />
</Switch>

class Profile extends Component {
   render() {
      return (
         <div className='profile_page'>
            <Profile_Bar />

            <div className='content'>
               <Switch>
                  <Route path={'/subscribers'} component={User_List} />
                  <Route path={'/dashboard'} component={Dashboard} />
               </Switch>
            </div>
         </div>
      )
   }
}

class Orders extends Component {
   render() {
      return (
         <div className='orders_page'>
            <Orders_Bar />

            <div className='content'>
               <Switch>
                  <Route path={'/active'} component={Orders_List} />
                  <Route path={'/completed'} component={Orders_List} />
               </Switch>
            </div>
         </div>
      )
   }
}

const NotFound = ({ location }) => (
  <div>
    NotFound {location.pathname}
  </div>
)

在我以前的认识中，我使用 <Redirect />相反:

<Switch>
   <Redirect from='/' to='/profile'/>
   <Route path={'/profile'} component={Profile} />
   <Route path={'/orders'} component={Orders} />
   <Route component={NotFound} />
</Switch>

Answer 1

理想情况下，您的 Profile 组件将在其自己的路由(如“/profile”)中处理，并为您的“/”路由创建一个单独的组件，例如 Home:

<Switch>
  <Route path={'/'} exact component={Home} />
  <Route path={'/profile'} component={Profile} />
  <Route path={'/orders'} component={Orders} />
  <Route component={NotFound} />
</Switch>

...然后您的个人资料组件将具有如下子路由:

<Switch>
  <Route path={'/profile/subscribers'} component={User_List} />
  <Route path={'/profile/dashboard'} component={Dashboard} />
</Switch>

---

如果您确实不希望路由路径中包含“个人资料”，那么您可以将“/subscribers”和“/dashboard”路由添加到主路由中，这两者都会呈现个人资料组件，但您可能仍然希望使用其自己的组件处理“/”路由:

<Switch>
  <Route path={'/'} exact component={Home} />
  <Route path={'/subscribers'} component={Profile} />
  <Route path={'/dashboard'} component={Profile} />
  <Route path={'/orders'} component={Orders} />
  <Route component={NotFound} />
</Switch>

---

我想另一个选择是更改路线的顺序，以便“/orders”在“/”之前匹配。然后，您可以从“/”路由中删除exact，以便子路由也匹配。

但在这种情况下，您必须在 Profile 组件中处理 NotFound 路由，这并不理想。

<Switch>
  <Route path={'/orders'} component={Orders} />
  <Route path={'/'} component={Profile} />
</Switch>