React-router v4。 “精确”的道具是否禁止嵌套路线？

Question

我注意到，如果我创建<Route path={'/'} exact component={Profile} />，我不能嵌套任何其他内部组件，只是因为该“prop”支持阻止任何匹配并停止呈现。

我试图建立的是一个简单的应用程序与配置文件和订单页面。每个页面都有自己的侧边栏和一些订购商品列表。根据当前位置，我在每个页面内部使用嵌套路线重新输入正确的顺序列表。为了使这个应用程序完美，我需要在起始位置渲染配置文件页面（例如'https://myapp.com'）。

我阅读所有文档，唯一的解决方案是在Route组件中使用“精确”的道具。但这是太脆弱的解决方案，因为如果我想使用嵌套路线进行侧栏或订单清单定义。

是否有任何其他方式建立一个路由，可以显示'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

理想的情况下你档案组件将在像“/型材自己的路由处理'并创建一个单独的组件，说首页，为您的'/'路线：

<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'在'/'之前匹配。然后，您可以从'/'路线删除确切，以便子路线也匹配。

在这种情况下，虽然，你将不得不处理在档案组件，这是不理想的NOTFOUND路线。

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