Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – how can redirect to absolute url (to subdomain) with react-router-dom

let me explain clearly what I want to do?

 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 />

I know part of the solution, although I’m not sure if it’s the best solution, please help me complete and optimize the solution.

For the first 4 items, they will all call the panel component, I use this solution

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>
    )
  }

But for the next 4 modes, I don’t know what to do?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution, but still the challenge to find better answers.

    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>
      )
  }

  2. 0

    and this is a shorest answer

    if(
    (!subdomain && !/^/((fa|en|ar)/)?(panel|login)/?$/.test(pathName)) ||
    ( subdomain && !['hol','archi','vet'].includes(subdomain) )
  ){
        ['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( !/^/(fa|en|ar)(/.*)?/.test(pathName) ){
    return <Navigate to={`/en${pathName}`}/>
  }
  else{
    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 path=""  element={subdomain=='hol'? <HoldingPage /><BlogPages />} />
          <Route path="*" element={subdomain=='hol'? <HoldingPage />: <BlogPages />} />
        </Route>
      </Routes>
    )
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search