我正在尝试将我的网站从传统的Web应用程序方式迁移到基于React的应用程序。在这个过程中,我遇到了一个与URL相关的问题。在我的网站上,服务器端使用Url Rewrite功能将URL映射到它们正确的控制器。但是我无法弄清楚如何在React路由器中处理这个问题。我的当前React路由器代码如下:
<BrowserRouter>
<Route exact path="/" component={Home}/>
<Route path="/black-forest" component={Product}/>
<Route path="/cakes" component={ProductList}/>
</BrowserRouter>
我写了这段代码来构建原型模型。但理想情况下,有许多不同的网址可以指向ProductList
组件。同样,有许多网址可以指向Product
组件。
例如,
以下网址将指向ProductList
组件
- http://www.example.com/best-cakes-in-australia
- http://www.example.com/cake-delivery-in-india
- http://www.example.com/flowers-delivery-in-canada
总体上,我有大约10,000个此类网址,这些网址是使用服务器端UrlRewrite
创建的,因此它们没有遵循任何特定的模式。这些网址大多数情况下将指向ProductList
或Product
组件。
我如何在我的React路由器配置中为所有这些网址创建路径? 任何提示都将不胜感激。
<Route path="/product-list/:products" component={ProductList}/>
处理像http://www.example.com/product-list/best-cakes-in-australia
这样的链接,你可以根据:products
的值来显示所需内容。 - Kyle Richardsonhttp://www.example.com/product-list/best-cakes-in-australia
而不是http://www.example.com/best-cakes-in-australia
,对吗?不,这样做不行,因为这将创建新的URL,从SEO的角度来看,维护当前的URL非常重要。 - Abhinav