在建立了我的网站主页之后，我终于弄清楚了如何动态导航到其他页面。我希望浏览器在用户点击下拉菜单并选择一个州时呈现州主页。导航工作正常，但它重新呈现组件50次，我不明白。我怀疑这是由于Map函数是创建菜单项。我可以建立50个单独的菜单项，但这真的很难看。
我刚刚开始学习React。我有7年的后端开发经验，但我仍然试图掌握React开发。我创建了一个带有Material UI的网页，其中有一个下拉菜单，如下所示

<FormControl>
  <InputLabel>Select a State</InputLabel>
  <Select value={location} onChange={selectionChangeHandler}>
    {locations.map((value) => (
     <MenuItem value={value.toLowerCase()} key={value.toLowerCase()} component={Link} to={`${value.toLowerCase()}/home`} >
      {value}
     </MenuItem> 
    ))}
  </Select>
</FormControl>

这将返回一个包含50个状态的下拉列表。当用户单击一个状态时，我希望程序在单击时路由到该页面。这个动态路由工作正常，但是。它重新呈现了我的组件50次。我认为这是因为下拉列表是在.map函数中构建的，并且该列表中有50个条目。
我可以删除50个菜单项中的Map功能和硬编码，但那很难看。
下面是我的onChange函数

const selectionChangeHandler = (event) => {
console.log(event.target.value) 
}

我还尝试删除组件={Link}并在selectionChangeHandler中使用useNavigate挂接，如下所示

const selectionChangeHandler = (event) => {
    console.log(event.target.value)
    setlocation(event.target.value)
    link = `${event.target.value}/home`
    navigate(link)

  }

这个作品，但也渲染50倍。我不知所措。
我把上面的内容交叉发布到了reddit上，然后我又做了一些研究。结果是在React中。当一个父组件的状态更新时，它会重新呈现所有的子组件。这可能是这里发生的事情，但我不知道如何修复它。即使我把状态作为一个 prop 传递给子组件，我仍然必须链接到正确的页面。
我有点紧张的张贴我真的试图把工作投入到解决我自己的问题之前，伸出援助之手，我可能会伸出援助之手很多，因为我学习。我致力于学习，但有些问题我只是不能解决我自己。
代码Link to Code的链接