如何使用react-router-dom重定向到绝对url（到子域）

Question

让我清楚地解释一下我想做什么？

 row |            current url             |             redirect to             | component


1    | localhost:3000/panel                | localhost:3000/en/panel             | <Panel />
2    | localhost:3000/login                | localhost:3000/en/panel             | <Panel />
3    | localhost:3000/anyLang/panel        | localhost:3000/sameLang/panel       | <Panel />
4    | localhost:3000/anyLang/login        | localhost:3000/sameLang/panel       | <Panel />

5    | localhost:3000/                     | holding.localhost:3000/en           | <HoldingPage />
6    | localhost:3000/anyLang              | holding.localhost:3000/sameLang     | <HoldingPage />


7    | anySubDomain.localhost:3000/        | sameSubDomain.localhost:3000/en      | <BlogPage />
8    | anySubDomain.localhost:3000/anyLang | sameSubDomain.localhost:3000/sameLang| <BlogPage />

我知道部分解决方案，虽然我不确定这是否是最好的解决方案，请帮助我完成并优化该解决方案。

对于前4项，它们都会调用面板组件，我使用这个解决方案

var
    url = window.location.href,
    subdomin = window.location.host.split(".")[0],
    pathName = useLocation().pathname;

  if( pathName.match(/((fa)|(en)|(ar)\/)?((login)|(panel))/) ){
    return(
      <Routes>
        <Route path="login" element={<Navigate replace to="/en/login" />} />
        <Route path="panel" element={<Navigate replace to="/en/panel" />} />
        <Route path="/:lang">
            <Route path="login" element={<Panel />} />
            <Route path="panel" element={<Panel />} />
        </Route>
      </Routes>
    )
  }

但是接下来的4种模式，我不知道该怎么办？

Answer 1

我找到了解决方案，但寻找更好的答案仍然是挑战。

var
    url = window.location.href,
    pathName = useLocation().pathname;

  if( url.match(/http:\/\/localhost:3000\/((fa|en|ar)\/)?((panel)|(login))/) ){
    return(
      <Routes>
        <Route path="login" element={<Navigate replace to="/en/login" />} />
        <Route path="panel" element={<Navigate replace to="/en/panel" />} />
        <Route path="/:lang">
          <Route path="login" element={<Panel />} />
          <Route path="panel" element={<Panel />} />
        </Route>
      </Routes>
    )
  }
  else if( url.match(/http:\/\/localhost:3000\/((fa|en|ar)\/?)?/) ){
    ['fa','en','ar'].includes(pathName.replace(/^\/|\/$/g, ''))?
      window.location.replace('http://hol.localhost:3000'+pathName):
      window.location.replace('http://hol.localhost:3000/en/');
  }
  else if(   
url.match(/http:\/\/(archi|vet)\.localhost:3000\/((fa|en|ar)\/?)?/) ){
    if( !pathName.match(/\/(fa|en|ar)\//) )
      return <Navigate to="/en/" />
    else
      return(
        <Routes>
          <Route path="*" element={<BlogPages />} />
        </Routes>
      )
  }
  else{
    if( !url.match(/http:\/\/hol\./) )
      window.location.replace('http://hol.localhost:3000'+pathName);
    else if( !pathName.match(/\/(fa|en|ar)\//) )
      return <Navigate to="/en/" />
    else
      return(
        <Routes>
          <Route path="*" element={<HoldingPage />} />
        </Routes>
      )
  }