reactjs - 反应路由器：动态 url id

Question

当我点击图片中的链接时，如何实现动态路径？

用户单击链接并转到消息部分，然后单击链接 (Link) 并转到所需的组件。

数据：

const data = [
    {
        link: 'Link Name 1',
        text: 'Text 1',
        id: '1'
    },
    {
        link: 'Link Name 2',
        text: 'Text 2',
        id: '2'
    },
    {
        link: 'Link Name 3',
        text: 'Text 3',
        id: '3'
    }
    ];

应用程序.js

<Switch>
 <Route exact path="/" component={AppHome}/>
 <Route exact path="/messages" component={AppMessages}/>
 <Route exact path="/messages/chat" component={AppMessageItems}/>
 <Route exact path="/messages/chat/:id" component={AppMessageItems}/>
</Switch>

消息.js

const AppMessages = () => {
             <ul>
                {data.map(function(item, index) {
                    return (
                        <li key={index}>
                            <Link to='/messages/chat'><AppMessageUserList {...item} /></Link>
                        </li>);
                })}
            </ul>
}

AppMessageUserList

const AppMessageUserList = ( props ) => {
const {link} = props;
   return ( <div> {link} </div> );

}

AppMessageItems.js

const AppMessageItems = () => {
   return ( <h1> Hello World </h1> );

}

但是当我尝试此代码时，单击链接时出现错误。

标签： reactjs

Answer 1

将您的代码替换为

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

注意：不要使用索引作为键