Вложенные маршруты React Router V6 с i18n

У меня есть вопрос о React Router V6, вложенном в i18n.

Это мой первый мультиязычный сервис.

const MainPage:React.FC = () => {

  const lang = i18n.language;

  return (
    <>
      <Wrapper>
        <Routes>
          {/* Main */}
          <Route path = {`/`} element = {<Home />}>
            <Route path = {`${lang}`}>
              <Route path = {`service`}>
                <Route path = {'slack'} element = {<Slack />} />
              </Route>
            </Route>
            {/* <Route path = {`service/dooray`}element = {<Dooray />} /> */}
            {/* <Route path = {`contact`} element = {<Contact />} /> */}

            {/* <Route path = {`app/sign-in`} element = {<SignIn />} /> */}
            {/* <Route path = {`app/sign-up`} element = {<SignUp />} /> */}
            {/* <Route path = {`app/mail-code`} element = {<MailCode />} /> */}
            {/* <Route path = {`app/password/reset`} element = {<PwdReset />} /> */}

            {/* <Route path = {`policies/privac`} element = {<Privacy />} /> */}
            {/* <Route path = {`policies/terms`} element = {<Terms />} /> */}
          </Route>
          {/* <Route path = {`*`} element = {<>NOT FOUND</>} /> */}
          {/* test */}
        </Routes>
      </Wrapper>
      <ParentModal />
    </>

Если я ввожу localhost:3000/en, возникает ошибка 'This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.'

Как я могу это исправить..

Я хочу /en => перейти на английскую страницу, /jp => перейти на японскую страницу


const MainPage:React.FC =() => {

...

<Route path = {`/`} element = {<Home />}>
    <Route path = {`/${lang}/*`}>
       <Route path = {`service`}>
           <Route path = "slack" element = {<Slack />} />
       </Route>
    </Route>
</Route>
}
const Home:React.FC = () => {

 return (
 <>
   ... UI, JSX
   <Outlet />
 </>
 )
}

Добавляю <Outlet />. Но если я ввел «/ko/service/slack», визуализировать <Home /> сейчас


<Route path = {`/`} element = {<Home />}>
    <Route path = "service">
       <Route path = "slack" element = {<Slack />} />
       <Route path = "dooray" element = {<Dooray />} />
    </Route>
</Route>

вложенные маршруты не работают.. :(

теперь я исправляю свой код ``` <Route path = {/} element = {<Home />} /> <Route path = {/${lang}} element = {<Home><Outlet /></Home>}> < Route path = {service} element = {<Outlet />}> <Route path = {'slack'} element = {<Slack />} /> </Route> </Route>```

Jerry 06.04.2022 17:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
49
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема

Ошибка 'This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.' означает, что родительский маршрут не отображает компонент Outlet для рендеринга вложенных маршрутов. Маршрут, отображающий компонент Home, не отображает Outlet.

Решение

Обновите компонент Home, чтобы отображать Outlet. Обратите внимание, что компоненты Route без реквизита element по умолчанию отображают Outlet.

Пример:

import { Outlet } from 'react-router-dom';

const Home = () => {
  ...

  return (
    <>
      ... home page UI/JSX ...
      <Outlet />
    </>
  );
};

...

const MainPage:React.FC = () => {
  const lang = i18n.language;

  return (
    <>
      <Wrapper>
        <Routes>
          {/* Main */}
          <Route path = "/" element = {<Home />}>
            <Route path = {lang}>   // <-- renders Outlet by default
              <Route path = "service"> // <-- renders Outlet by default
                <Route path = "slack" element = {<Slack />} />
              </Route>
            </Route>
            ...
          </Route>
          ...
          {/* test */}
        </Routes>
      </Wrapper>
      <ParentModal />
    </>
  );
};

Обновлять

Если компоненты Home и Slack являются отдельными и независимыми, то переместите компонент Home в индексный маршрут и упростите маршрутизацию до компонента Slack.

<Routes>
  <Route path = "/">
    <Route index element = {<Home />} />
    <Route path = {`${lang}/service/slack`} element = {<Slack />} />
  </Route>
</Routes>

Edit react-router-v6-nested-routes-with-i18n

@ Джерри, я не совсем понимаю, что ты говоришь. Вы говорите, что Home является отдельным компонентом страницы и не должен отображаться с содержимым вложенного маршрута? Вы можете уточнить?

Drew Reese 07.04.2022 04:34

Мне жаль. Я не очень хорошо говорю по-английски. Комментарий, который я написал 9 минут назад, удален. Я имею в виду, что вложенные маршруты не работают. Я обновляю свой вопрос. '/ko/service/slack' визуализировать <Главная />

Jerry 07.04.2022 04:56
<Outlet />компонент теперь работает как рендер <Home/> и под <Home /> рендером компонента <Slack />. Но я не хочу рендерить под какой-то компонент
Jerry 07.04.2022 05:19

@Jerry Хорошо, так вы говорите, что хотите, чтобы компонент Home отображался на пути "/", а компонент Slack отображался на пути "/{lang}/service/slack", оба независимо?

Drew Reese 07.04.2022 06:19

Да ! они работают оба независимо.

Jerry 07.04.2022 07:46

@Jerry Хорошо, я обновил свой ответ, указав предложенную конфигурацию маршрутизации.

Drew Reese 07.04.2022 08:11

Могу ли я задать дополнительный вопрос о многоязычном маршрутизаторе?

Jerry 08.04.2022 03:58

Давайте продолжить обсуждение в чате.

Drew Reese 08.04.2022 04:42

Другие вопросы по теме