使用 i18n 的 React Router V6 嵌套路由

Question

我有一个关于嵌套 i18n 的 React Router V6 的问题。

这是我的第一个多语言服务。

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>

嵌套路由不起作用.. :(

Answer 1

问题

错误 'This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.' 表示父路由没有为要渲染到的嵌套路由渲染 Outlet 组件。渲染 Home 组件的路由似乎没有渲染 Outlet.

解决方案

更新 Home 组件以呈现 Outlet。请注意，没有 element 属性的 Route 组件将默认呈现 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>

使用 i18n 的 React Router V6 嵌套路由

React Router V6 nested Routes with i18n

javascript

nested-routes

reactjs

react-router

react-i18next

问题

解决方案

更新