下拉选择导航到URL路由时重置为第一个值

Question

经过多次教程，我刚刚开始构建自己的React网站。我有一个简单的下拉选择，当选择时导航到特定的路线/URL。然而，我希望选择停留在用户导航到的URL上(因此，当选择"蚂蚁"页面时，下拉列表会转到"蚂蚁"或"蜜蜂"等(。这是我的密码。我也尝试了很多不同的东西；使用导航"来自路由器&其他一些方法也无济于事。有人有什么想法吗？如果这是一个愚蠢的问题，谢谢你，也很抱歉。

这是我的下拉组件代码

export default function DropDown() {
function onChange(e) {
window.location.href = `/${e.target.value}`;
};
return (
<div className="select-container">
<p> <label htmlFor="pests">Choose a pest: </label></p>
<div class="select-dropdown">
<select onChange={onChange}>
<option value="ants">Ants</option>
<option value="wasps">Wasps</option>
<option value="mice">Mice</option>
</select>
</div>
</div>
);
}

这是我的app.js(路由器(中的代码

function App() {
return (
<div className="main">
<Header />
<NavbarBasic />
{/* These are the main routes and subpages */}
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/pests-we-treat' element={<Pests />} />
<Route path='/services' element={<Services />} />
<Route path='/contact' element={<Contact />} />
<Route path='/ants' element={<Ants />} />
<Route path='/wasps' element={<Wasps />} />
<Route path='/roaches' element={<Roaches />} />
<Route path='/bedbugs' element={<Bedbugs />} />
<Route path='/bees' element={<Bees />} />
<Route path='/mice' element={<Mice />} />
<Route path='/flies' element={<Flies />} />
</Routes>
</div>
);
}

return (
<div className="select-container">
<p> <label htmlFor="pests">Choose a pest: </label></p>
<div class="select-dropdown">
<select onChange={onChange}>
<option value="ants">Ants</option>
<option value="wasps">Wasps</option>
<option value="mice">Mice</option>
</select>
</div>
</div>
);
}

为了子孙后代，这是我的代码与实际的Navbar

export default function NavbarBasic() {
const Hamburger = () => {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

return (
<div className="topnav" id="myTopnav">
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
<NavLink to="/pests-we-treat">Pests We Treat</NavLink>
<div className="dropdown">
<button className="dropbtn">Pests We Treat
<CaretDownIcon className="caret" />
</button>
<div className="dropdown-content">
<a href="/ants" to="/">Ants</a>
<a href="/bedbugs" to="/">Bedbugs</a>
<a href="/flies" to="/">Flies</a>
<a href="/roaches" to="/">Roaches</a>
<a href="/wasps" to="/">Wasps</a>
</div>
</div>
<a href="#" className="icon" onClick={Hamburger}>&#9776;</a>
</div >
)
}

Answer 1

注意选项的值！在这种情况下，我添加了"/">

let currentPath = window.location.pathname

return (
...
<select onChange={onChange} defaultValue={currentPath}>
<option value="/ants">Ants</option>
<option value="/wasps">Wasps</option>
<option value="/mice">Mice</option>
</select>
...
);