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-Router应用程序时遇到了同样的问题。

由于你没有把你的整个路由放入，我必须假设你在React-Router教程中做了类似默认建议路由的事情，它看起来像这样：

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

可以说，如果你没有其他路线的孩子关闭'App'，你可以删除'IndexPage'组件。

...输入后我看到你的小图像链接你的模态。我相信这仍然是你的问题。使用React.cloneElement与父级深度嵌套路由可能会导致此问题。您可以使用createElement向下传递props而不是cloneElement以避免引用问题。看看这里：Create Element另一个选择是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>

重复组件在`react-router`中？

2 个答案: