score:3

Accepted answer

Replace your code with

// App.js
<Switch>
 <Route exact path="/" component={AppHome}/>
 <Route exact path="/messages" component={AppMessages}/>
 <Route path={["/messages/chat", "/messages/chat/:id"]} component={AppMessageItems}/>
</Switch>

// Messages.js
// Assuming item has id and upon clicking the item should change the url

const AppMessages = () => (
  <ul>
    {data.map((item, index) => 
      (
        <li key={item.id}>
          <Link to={`/messages/chat/${item.id}`}>
             <AppMessageUserList {...item} />
           </Link>
         </li>
       )
     }
    </ul>
)


// AppMessageItems

const AppMessageItems = (props) => {
if (props.match.params && props.match.params.id) {
   // return the selected items
 }
// return whatever you wanted to return if nothing is selected 
}

NOTE: Don't use index as key


Related Query

More Query from same tag