Question

我注意到，如果我创建<Route path={'/'} exact component={Profile} />，我就无法嵌套任何其他内部组件，因为那个道具＆＃34;确切地说＆＃34;防止任何匹配并停止渲染。

我尝试构建的是一个带有个人资料和订单页面的简单应用。每个页面都有自己的侧边栏和一些订单商品列表。我在每个页面内使用嵌套路由来根据当前位置重新建立正确的订单列表。为了使这个应用程序更加完美，我需要在起始位置呈现“个人资料”页面（例如，＆＃39; https://myapp.com＆＃39;）。

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

是否有其他方法可以构建可以在＆＃39; https://myapp.com＆＃39;＆＃39; {{3}}＆＃39;位置，但也允许我使用嵌套路线？

我目前的实施是下一步：

<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

理想情况下，个人资料组件会在自己的路线上处理，例如＆＃39; / profile＆＃39;并为您的＆＃39; /＆＃39;创建一个单独的组件，例如主页;路线：

<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>

如果你真的不想要＆＃39;个人资料＆＃39;在路线路径中，您可以添加＆＃39; / subscriber＆＃39;和＆＃39; /仪表板＆＃39;路线到您的主要路线，这两个路线都呈现个人资料组件，但您可能仍希望处理＆＃39; /＆＃39;路线有自己的组件：

<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>

我认为另一种选择是更改路线的顺序，以便＆＃39; / orders＆＃39;匹配之前＆＃39; /＆＃39;。然后，您可以从＆＃39; /＆＃39;中删除完全。路由，以便子路线也匹配。

但是，在这种情况下，您必须在配置文件组件中处理 NotFound 路由，这是不理想的。

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

React-router v4。是＆＃34;确切＆＃34;道具禁止任何嵌套路线？

1 个答案: