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

How to use sub domain in react? – Reactjs

I wrote the react route code as below, everything works fine.

export const RoutePage = () => {
  return <BrowserRouter>
    <Routes>
      <Route element={<DefaultLayout/>}>
        <Route path='/' element={<Main />} />
        <Route path='/login' element={<LoginPage />} />
        <Route path='/register' element={<RegisterPage />} />
        <Route path='/mypage' element={<MyPage />} />
        <Route path='*' element={<NotFoundPage />}/>
      </Route>
    </Routes>
  </BrowserRouter>
}

However, there is a situation where a subdomain is required, how to set up a subdomain in this case?

In the current state, if you connect to localhost:3000/myinfo, you will be connected to the page, but,

If I connect to admin.localhost:3000/myinfo, I should be connected to another page. What should I do in this case?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured out how to control the right page for each domain, I received good answers in the current post, but the method below was the best in my situation.

    export const MainRoute = () => {
  return <BrowserRouter>
    <Routes>
      <Route element={<DefaultLayout/>}>
        <Route path='/' element={<Main />} />
        <Route path='/login' element={<LoginPage />} />
        <Route path='/register' element={<RegisterPage />} />
        <Route path='/mypage' element={<MyPage />} />
        <Route path='*' element={<NotFoundPage />}/>
      </Route>
    </Routes>
  </BrowserRouter>
}

export const ManagerRoute = () => {
  return <BrowserRouter>
  <Routes>
    <Route path='*' element={<NotFoundPage />}/>
    <Route element={<DefaultLayout/>}>
    </Route>
  </Routes>
</BrowserRouter>
}

    I searched for the current connection url on the start page and connected the router suitable for the subdomain.

    .....
const host = window.location.host.split(".")
  switch (host[0]) {
    case "manager":
      return <ManagerRoute />;      
    default:
      return <MainRoute />;
    }
}

    I don't have much experience, but this answer gave me what I wanted without creating another project, if you have any other ideas please let me know thanks!


  2. 0

    Are you comfortable with DNS type A records?
    If so, you can create a subdomain and point it to the same IP address as your react application.

    For example:

    your react application runs on this IP address: 127.0.0.1

    your-domain.com points to this IP address: 127.0.0.1

    subdomain.your-domain.com also points to this address: 127.0.0.1

    This way, I think your-domain.com/myinfo and subdomain.your-domain.com/myinfo will refer to the same route on your application.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search