У меня есть вопрос о 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>
вложенные маршруты не работают.. :(
Ошибка '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>
@ Джерри, я не совсем понимаю, что ты говоришь. Вы говорите, что Home
является отдельным компонентом страницы и не должен отображаться с содержимым вложенного маршрута? Вы можете уточнить?
Мне жаль. Я не очень хорошо говорю по-английски. Комментарий, который я написал 9 минут назад, удален. Я имею в виду, что вложенные маршруты не работают. Я обновляю свой вопрос. '/ko/service/slack' визуализировать <Главная />
<Outlet />
компонент теперь работает как рендер <Home/>
и под <Home />
рендером компонента <Slack />
. Но я не хочу рендерить под какой-то компонент
@Jerry Хорошо, так вы говорите, что хотите, чтобы компонент Home
отображался на пути "/"
, а компонент Slack
отображался на пути "/{lang}/service/slack"
, оба независимо?
Да ! они работают оба независимо.
@Jerry Хорошо, я обновил свой ответ, указав предложенную конфигурацию маршрутизации.
Могу ли я задать дополнительный вопрос о многоязычном маршрутизаторе?
Давайте продолжить обсуждение в чате.
теперь я исправляю свой код ``` <Route path = {
/
} element = {<Home />} /> <Route path = {/${lang}
} element = {<Home><Outlet /></Home>}> < Route path = {service
} element = {<Outlet />}> <Route path = {'slack'} element = {<Slack />} /> </Route> </Route>```