如何将常量数据传递给React Router的NavLink组件路径？

你只需要修改NavLink的to属性，将固定的"/data"替换为动态的数组项值，同时为map生成的列表项添加唯一key属性（避免React警告）。修改后的代码如下：

import { NavLink } from "react-router-dom"

export const LinkMenu = () => {
    const masterControl = ["excursion", "agencie","guide","driver","vehicle"] 
  
    return (
        <div className="text-center text-light">
            <h6>Master Control</h6> 
            {masterControl.map((data) => (
                <div key={data}>
                    <NavLink 
                        style={{textDecoration: 'none', color:"rgb(214, 62, 24)"}} 
                        to={`/${data}`}
                    >
                        {data}
                    </NavLink>
                    <br />
                </div>
            ))}
        </div> 
    )
}

修改说明： #

• 将to="/data"改为to={/${data}}：这样每个NavLink的目标路径就会对应数组中的项，比如第一个链接路径为/excursion，第二个为/agencie，以此类推。
• 添加key={data}：React要求列表渲染时每个元素必须有唯一key，这里用数组项本身作为key（数组内值均唯一）。
• 简化map写法：直接返回JSX元素，省去额外定义res变量，代码更简洁。

如果你的路径需要基础前缀（比如/data/excursion这类形式），只需把to属性改成to={/data/${data}}即可。

内容的提问来源于stack exchange，提问作者Leandro Rodriguez