Преобразовать реагирующий маршрутизатор в v4: перенаправить все маршруты, чтобы включить lang - PullRequest
Новая
       23

Преобразовать реагирующий маршрутизатор в v4: перенаправить все маршруты, чтобы включить lang

0 голосов
/ 16 мая 2019

Мы локализовали наше приложение, и теперь мне нужно включить lang во все маршруты, я наткнулся на код, который будет делать то, что я хочу, но у меня возникнут проблемы с тем же в реакции-маршрутизаторе v4

Вот код, на который я ссылаюсь Как установить и обработать язык в реакции-роутере с?

Вот пример кода, с которым я работаю, чтобы он заработал до его интеграции в наше приложение: 

// add lang to url if it's not present
function langRedirect(props) {
  console.log({ props });
  const defaultLang = 'en';
  const redirectPath = `/${defaultLang}${props.history.location.pathname}`;
  console.log(redirectPath);
  props.history.replace({ pathname: redirectPath, });
}

.... 

<Switch>
  <Route path="/:lang/" render={() => <h1>testing... does nothing</h1>}>
    <Route path="/:lang/test" render={() => <h2>Test</h2>} />
    <Route path="/:lang/test2" render={() => <h2>Test2</h2>} />
  </Route>
  <Route path="*" render={langRedirect} />
</Switch>

Что произойдет здесь, если я пойду к маршруту, подобному /test, коммутатор все равно поймает маршрут /:lang/, даже если в конце нет /, что препятствует переходу на маршрут с langRedirect. Похоже, другое поведение в v4.

1 Ответ

0 голосов
/ 16 мая 2019

Что ж, потратив на это часы, я понял это сразу после публикации вопроса ...

Мне нужно было добавить * к маршруту, например, <Route exact path="/:lang/*" render={() => <h1>Test</h1>}>

Вот рабочий код: 

// add lang to url if it's not present
function langRedirect(props) {
  console.log({ props });
  const defaultLang = 'en';
  const redirectPath = `/${defaultLang}${props.history.location.pathname}`;
  console.log(redirectPath);
  props.history.replace({
    pathname: redirectPath,
  });
}

... 

const TestingRoutes = () => {
  return (
    <Switch>
      <Route exact path="/:lang/*" render={() => <h1>Test</h1>}>
        <Route path="/:lang/test" render={() => <h2>Test</h2>} />
        <Route path="/:lang/test2" render={() => <h2>Test2</h2>} />
      </Route>
      <Route path="*" render={langRedirect} />
    </Switch>
  );
};
...