如何基于子域路由和基于文件夹的路由 React.js 将用户重定向到不同的页面

Question

我正在做一个 React.js 项目，在这个当前项目中所有的 url 看起来像这样

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

反应路由器路径

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

现在我有要求用户也想像这样支持 Url

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

我如何支持这两个路由。

Answer 1

路由可以有多个路径名

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

Answer 2

在 React 中，您可以使用 componentWillMount 生命周期方法来检查当前 URL 并在必要时将用户重定向到不同的页面。例如，如果您想将用户重定向到基于子域的页面，您可以使用以下代码：

componentWillMount() {
  const { hostname } = window.location;
  if (hostname === 'subdomain.example.com') {
    this.props.history.push('/subdomain-page');
  }
}

同样，您可以使用 componentWillMount 方法检查当前 URL 并根据 URL 路径将用户重定向到页面。例如，如果你想根据 URL 中的文件夹将用户重定向到一个页面，你可以使用以下代码：

componentWillMount() {
  const { pathname } = window.location;
  if (pathname.startsWith('/folder')) {
    this.props.history.push('/folder-page');
  }
}

请注意，在这两个示例中，历史对象都用于将新 URL 推送到历史堆栈，这将导致路由器导航到指定页面。