вложенные маршруты с необязательным параметром

Question

Привет для использования локализации. Мне нужны дополнительные вложенные маршруты, такие как / en / mypage, / ru / mypage, / my page, я уже пытался работать с <Route, но не работал.

<Route path="/:lang(en|lt|ru)?" >
   <Route path="/surveys" exact component={Dashboard} />
</Route>

Уже найденные выше решения с более ранними версиями, но сейчас они не работают.Как я могу это реализовать?я знаю, что это возможно добавить к каждому параметру маршрута, но здесь нет более элегантного способа.

Answer 1

Вы не можете вложить свои маршруты в React-Router v4.Вместо этого вы должны добавить вложенные маршруты в component или использовать render prop:

<Route path="/:lang(en|lt|ru)" render={({ match: { url } }) => (
      <>
        <Route path={`${url}/surveys`} component={Dashboard} exact />
      </>
    )} 
/>

В приведенном выше примере ваши доступные маршруты будут

/en/surveys
/lt/surveys
/ru/surveys