在React JS中通过共享重命名链接到特定页面(别名)

Question

我创建了一个网站，上面显示了各种公司/产品。现在这个链接是相当技术性的，并不漂亮。它包含填充页面的各种信息。一个例子是:https://beterbijons.nl/winkel?id=OGnTwRrsdIZ5dJc1WPqzZpjfKWf2

如果你在网站上，那就没有问题。但我想要的是，如果你分享链接或直接浏览:https://beterbijons.nl/shopname

so例如:https://beterbijons.nl/stichting-britt-helpt

它会把你带到那一页。然而，我不知道如何用ReactJs实现这一点。有人有这方面的经验吗?

我使用的是React-router-dom, Router是这样的:

<Router basename={process.env.REACT_APP_BASENAME || ""}>
<Switch>

<div>
<Route exact path="/" component={ShopPageView}/>
<Link to="/plaats?naam=:naam"/>
<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}/>
<Link to="/winkel/:id"/>
<Route path="/winkel" component={ShopSummaryView}/>
<Route exact path="/winkelmand" component={ShoppingBagView}/>
<Link to="/product/:plaats/:winkelier/:id"/>
<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}/>
</Router>

Answer 1

要做到这一点，您应该使用React component和some props，其中它返回<Link />

const HomeLink = ({to, ...rest}) => {
return <Link to={to} {...rest} />
}

然后像使用-一样使用<HomeLink to="/shopName" exact strict sensitive />