How to set url in react with react router dom-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

If I understand correctly, you want to change only a part of your page so I prefer to build a layout component first and do this:

const FistLayout= ({ location }) => {
return (
<div>
<NavbarVertical />
<NavbarTop />
///when location changes just change here
<Switch>
   <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>
</Switch>
</div>
);

}

CodePudding user response：

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