Viktor Pavlenko Viktor Pavlenko - 21 days ago 5
React JSX Question

Duplicate component In `react-router`?

What I have

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


My problem if my path
view
, I see two
profilePage
components

Answer

I had this same issue when wiring up Redux to my React-Router app.

Since you didn't put your whole routing in I have to assume you're doing something like the default suggested routing in the React-Router tutorial it would look like this:

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

If you're using a similar structure and are using React.cloneElement() in the container component 'App' like this:

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

You'll have to reduce the nesting as it's cloning the 'ProfilePage' as a child for all the children as well. Try changing it to this:

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

Arguably you could eliminate the 'IndexPage' component if you don't have further route children off 'App'.

...After Typing this out I saw your little image link with your modal. I believe this is still your problem. Deeply nesting your routes with a parent using React.cloneElement is likely to cause this. You might be able to use createElement to pass props down instead of cloneElement to avoid reference issues. Have a look at that here: Create Element another choice is createComponent as well in the docs to map props. I haven't tried that yet myself though.