How to set url in react with react router dom

user_19631073 0
Viewed 67

I want to do if in url there is first parametr "/german", it keeps opened my component . it is the menu where a person always can pick something, despite what other component are opened. For example, person picks "listening" ulr gets "/german/listening", but my menu has to be opened

<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>
react-router-dom react-router reactjs
2 Answers

you should use layout

<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>

Layout: (Outlet is where the component will be rendered)

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

You can use useHistory hook from the 'react-router-dom'. This hook will update your URL according to your need. For more information refer below demo

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`})
}

This will update your url.

user_184368690
Related