“router`router`”中的重复组件？

Question

我所拥有的

      <Route path="profile" component={ProfilePage} >
        <Route path="edit(/:profileId)" component={EditProfile} />
        <Route path="add(/:profileId)" component={AddProfile} />
        <Route path="view/:profileId" component={ProfilePage}/>
      </Route>

我的问题如果我的路径view，我看到两个profilePage组件

Answer 1

我有同样的问题，当连接到我的反应-路由器应用程序的Redux。

由于您没有将整个路由放入其中，所以我必须假设您正在执行的操作类似于React React教程中默认的建议路由，它看起来如下所示：

<Router history={browserHistory}>
    <Route path="/" component={App} >
        <IndexRoute component={IndexPage} />
        <Route path="profile" component={ProfilePage} >
            <Route path="edit(/:profileId)" component={EditProfile} />
            <Route path="add(/:profileId)" component={AddProfile} />
            <Route path="view/:profileId" component={ProfilePage}/>
        </Route>
    </Route>
<Router />

如果您使用的是类似的结构，并且在容器组件'App‘中使用React.cloneElement()，如下所示：

{React.cloneElement(this.props.children, this.props)}

您将不得不减少嵌套，因为它克隆'ProfilePage‘作为一个孩子，以及所有的孩子。尝试将其更改为：

<Router history={browserHistory}>
    <Route path="/" component={App} >
        <IndexRoute component={IndexPage} />
    </Route>
    <Route path="/profile" component={ProfilePage} >
        <Route path="edit(/:profileId)" component={EditProfile} />
        <Route path="add(/:profileId)" component={AddProfile} />
        <Route path="view/:profileId" component={ProfilePage}/>
    </Route>
<Router />

可以说，如果没有更多的“应用程序”路由，您可以消除“IndexPage”组件。

...After输入这个，我看到你的小图像链接与你的模式。我相信这仍然是你的问题。与使用React.cloneElement的父节点深入嵌套您的路由可能会导致这种情况。您可能可以使用createElement来传递道具，而不是cloneElement，以避免引用问题。在这里看一下：创建元素，另一个选择是createComponent，也可以在文档中映射道具。不过我自己还没试过呢。

Answer 2

你可能想要IndexRoute。试着做这样的事情：

<Route path="profile">
  <IndexRoute component={ProfilePath} />
  <Route path="edit(/:profileId)" component={EditProfile} />
  <Route path="add(/:profileId)" component={AddProfile} />
  <Route path="view/:profileId" component={ProfilePage}/>
 </Route>