How to redirect user to different pages based on subdomain routing and folder based routing React.js

Question

i am working on one React.js Project, in this current project all the url look like this

Home page url:dev-pcm.io/mydomain-name
Login Page url:dev-pcm.io/mydomain-name/auth
cart Page url:dev-pcm.io/mydomain-name/checkout
Order Page url:dev-pcm.io/mydomain-name/my-orders

//Here if i have button i am redirecting to any other page like this

import {useParams,useHistory} from "react-router-dom"
const function Button()=>{
const params=useParams();
const history=useHistory();

//is there any good approach to get rid from these checks

const goto=()=>{
    
    if (params?.url) {
history.push(`/${params.url}/my-orders`);
      
    } else {
     history.push(`/my-orders`);
    }
  };
return <button>
MY Order Page
</button>}

React Router Paths

    const Routes=[{
        path: "/:url",
        component: Home,
        exact: true,
      },
 {
        path: ["/:url/my-orders","/my-orders"],
        component: MyOrders,
        exact: true,
      },
]

Now i have requirement user also wants to support Url Like this

Home page url:mydomain-name
    Login Page url:mydomain-name/auth
    cart Page url:mydomain-name/checkout
    Order Page url:mydomain-name/my-orders

How can i support these both both routing.

A React app is served from one location. What exactly are you trying to do, serve the app from two URLs, or rather, host two instances of the app? Can you clarify what the problem is that you are trying to solve for? — Drew Reese, Dec 06 '22 at 07:50
@DrewReese- it is a requirement .user can also access the App without add `dev-pcm.io/mydomain-name`. i have to support multiple urls — Andaman, Dec 06 '22 at 10:48
So am I correct in understanding that there is only ***one*** app instance being served, and you want all (*or some*) routes the app renders to handle ***two*** paths? — Drew Reese, Dec 06 '22 at 22:23

score 0 · Answer 1 · answered Dec 07 '22 at 17:31

I think you may be overcomplicating things a bit by trying to manage two routing trees. My suggestion here would be to manage only a single routing tree, and for the public URL paths that operate in a "subdomain" render a redirect from that "subdomain" into your single routing structure. This will allow normal linking between routes and anything linking to the "subdomain" will be redirected back into the regular routes.

Here's an example:

import { Redirect } from "react-router-dom";

const MyDomainRedirectHandler = ({ match }) => {
  const { path = "" } = match.params;
  return <Redirect to={`/${path}`} />
};

// routes specified in inverse order of path specificity for Switch
const routes = [
  ... more specific paths ...,

  {
    path: "/mydomain-name/:path*",
    component: MyDomainRedirectHandler
  },
  .......
  {
    path: "/my-orders",
    component: MyOrders
  },

  ... less specific paths ...,

  {
    path: "/",
    component: Home,
    exact: true,
  }
];

App rendering the routes

import { Switch, Route, Redirect } from "react-router-dom";

...

<Switch>
  {routes.map((route) => (
    <Route key={route.path} {...route} />
  ))}
  <Redirect to="/" /> // <-- all unhandled paths redirect to home
</Switch>

How to redirect user to different pages based on subdomain routing and folder based routing React.js

1 Answers1