Javascript 如何在React中的下拉选项中添加链接/标签

所以基本上，我在做一个我不太熟悉的项目， 我想做一个简单的下拉列表，将改变网址（简单）

这是代码-

function Front() {
const [selectedOption, setSelectedOption] = React.useState("A");



if (selectedOption === "A") {
  //Do something here (but what so that I can put that value of selectedOption in the Url?)
 
} else if (selectedOption === "B") {
  //Do something here

} else if (selectedOption === "C"){
    //Do somthing here
 
}

return (
  
<>

    <div className ="front__text">
       <h1>Wind Pioneers</h1> <button>Tutorial</button>
      
    </div>
    <div className="front__text__second">
        <p>Select System</p>
    <select className="drop"  value={selectedOption}
    onChange={evt => setSelectedOption(evt.target.value)}>
        <option value="A" id={1} >1
        
         </option>
         <option value="B" id={2}>
         2
         </option>
         <option value="C" id={3}>
         3
         </option>
    </select>
    </div>
        

    </div>

   
  
   
 </>
)
}

函数前端（）{
const[selectedOption，setSelectedOption]=React.useState（“A”）；
如果（选择选项==“A”）{
//在这里做点什么（但是我可以把selectedOption的值放到Url中吗？）
}否则如果（选择选项==“B”）{
//在这里做点什么
}else if（选择选项==“C”）{
//在这里做点什么
}
返回(
风先锋教程
选择系统

setSelectedOption（evt.target.value）}>
1.
2.
3.
)
}

---

<>我尝试使用，但是我认为链接和锚标签在那里不起作用，因为这可能被认为是坏的HTML。我需要做些什么才能摆脱这一困境，而且我甚至不想使用任何外部库来完成这一任务。

您必须使用npm安装

popper.js

和

jquery.js

。 这将帮助您：

return (
<div>
  <div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    {/*enter the url you want inside href atribute*/}
      <a class="dropdown-item" href="#">
        A
      </a>
      <a class="dropdown-item" href="#">
        B
      </a>
      <a class="dropdown-item" href="#">
        C
      </a>
    </div>
  </div>
</div>
);

返回(
下拉按钮
{/*在href atribute*/}中输入所需的url
);

如果我理解正确，我认为您可以在按钮上添加onClick事件侦听器，并在该函数中访问selectedOption状态值，然后使用该值更改url。检查此项：是否只想更改url而不执行任何操作？或者将页面重定向到URL？事实上，我正在实现动态路由，如果id（/：id）与数据的id表匹配，我希望您得到><因此一切都很好，但现在我必须手动指定URL，我希望它能够自动化：（我甚至不知道如何传递XD