React JS中实现带分享功能的特定页面链接别名设置

首先帮你修正下现有路由配置里的小问题：Switch组件内只应该放置Route元素，你现在把Link标签放在Switch里是错误的——Link是用来在组件内部生成跳转链接的，不属于路由配置的一部分，先把这些Link从Switch中移除。

接下来要实现https://beterbijons.nl/stichting-britt-helpt这类友好URL的跳转，核心思路分为三步：

1. 新增一个动态路由匹配任意单段友好店铺名称（比如:shopName）
2. 在该路由对应的组件中，根据友好名称获取对应的店铺ID
3. 要么重定向到原有的/winkel?id=xxx页面，要么直接传递ID给ShopSummaryView渲染内容

步骤1：调整路由配置 #

把新增的动态路由放在所有固定路由的最后，避免它拦截/over-ons、/contact这类明确路径。修改后的Router配置如下：

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

// 若店铺数据存在后端，这里替换为API请求逻辑；前端测试可先用映射对象
const SHOP_NAME_TO_ID = {
  'stichting-britt-helpt': 'OGnTwRrsdIZ5dJc1WPqzZpjfKWf2',
  // 其他店铺的名称-ID映射
};

// 中间重定向/跳转组件
const ShopRedirect = ({ match }) => {
  const shopName = match.params.shopName;
  const shopId = SHOP_NAME_TO_ID[shopName];

  if (shopId) {
    // 方案1：重定向到原有带ID的页面
    return <Redirect to={`/winkel?id=${shopId}`} />;
    
    // 方案2：直接渲染目标组件并传递ID（避免页面跳转）
    // return <ShopSummaryView shopId={shopId} />;
  }

  // 若找不到对应店铺，重定向到首页或404页面
  return <Redirect to="/" />;
};

// 修正后的完整路由配置
<Router basename={process.env.REACT_APP_BASENAME || ""}>
  <Switch>
    <Route exact path="/" component={ShopPageView}/>
    <Route exact path="/plaats" component={ShopPageView}/>
    <Route exact path="/over-ons" component={BeterBijOnsView}/>
    <Route exact path="/contact" component={ContactView}/>
    <Route exact path="/vragen" component={FaqView}/>
    <Route path="/winkel" component={ShopSummaryView}/>
    <Route exact path="/winkelmand" component={ShoppingBagView}/>
    <Route path="/product" component={ShopProductDetailView}/>
    <Route exact path="/afrekenen" component={CheckoutView}/>
    <Route exact path="/bedankt" component={ThankYouView}/>
    <Route exact path="/inloggen" component={LoginScreen}/>
    <Route path="/aanmelden" component={SignOnView}/>
    <Route path="/aanmelden-compleet" component={SignOnCompleteView}/>
    {/* 新增友好URL路由，必须放在最后！ */}
    <Route path="/:shopName" component={ShopRedirect}/>
  </Switch>
</Router>

步骤2：处理ShopSummaryView的参数获取 #

如果你选择重定向方案：

ShopSummaryView需要从URL的query参数中获取ID，可借助query-string库解析（或自行编写解析逻辑）：

import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

const ShopSummaryView = () => {
  const location = useLocation();
  const { id } = queryString.parse(location.search);

  // 用id请求店铺数据并渲染页面
  // ...
};

如果你选择直接传递ID（无跳转）：

建议把原有的/winkel路由改成带参数的形式，更符合RESTful风格：

// 修改原路由为带ID参数的形式
<Route path="/winkel/:id" component={ShopSummaryView}/>

// 同时修改ShopRedirect中的重定向逻辑
return <Redirect to={`/winkel/${shopId}`} />;

此时ShopSummaryView可直接通过useParams()获取ID：

import { useParams } from 'react-router-dom';

const ShopSummaryView = () => {
  const { id } = useParams();
  // 使用id获取店铺数据并渲染
  // ...
};

关键注意事项 #

• 路由顺序优先级：动态路由:shopName必须放在最后，否则会匹配所有单段路径（比如/over-ons会被误识别为店铺名称）
• 店铺名称唯一性：确保每个店铺的友好名称不重复，避免路由冲突
• 后端适配（可选）：若店铺数据存储在后端，ShopRedirect中需用fetch/axios请求接口，根据店铺名称获取对应ID
• 异常处理：对不存在的店铺名称，要重定向到首页或404页面，提升用户体验

这样就能实现用户分享友好URL直接跳转到对应店铺页面的需求啦！

内容的提问来源于stack exchange，提问作者Joppe Meijers