如何在react中设置url与react路由器dom

Question

如果url中有第一个parameter"德语"；，它一直打开我的组件。它是一个菜单，不管打开了什么其他组件，人们总是可以选择一些东西。例如，person pick"；"倾听"；ulr得到"/德语/听力"；，但是我的菜单必须打开

<Routes>
<Route path="/" element={<TitlePage/>} /> <Route/>
<Route path="/german" element={<LanguageChoice />}/> <Route/>           
<Route path="/german/listening" element={<Listening />}></Route>
<Route path="/german/vocabulary" element={<Vocabulary />}></Route>
</Routes>

Answer 1

您应该使用布局

<Routes>
<Route path="/german" element={<Layout />}>          
<Route path="/listening" element={<Listening />}></Route>
<Route path="/vocabulary" element={<Vocabulary />}></Route>
</Route>
<Route path="/" element={<TitlePage/>} /> <Route/>
</Routes>

布局：(出口是组件将被渲染的地方(

<>
<LanguageChoice />
<Outlet />
</>

Answer 2

您可以从"react router dom"使用useHistory挂钩。此挂钩将根据您的需要更新您的URL。有关更多信息，请参阅以下演示

import {useHistory} from 'react-router-dom';
const history = useHistory()
function someMainFunction(){
// some conditions where you need to update the url
history.push({pathname:`your desired path`})
}

这将更新您的url。