反应路由器中的动态路径

Question

我正在尝试将我的网站从传统的网络应用程序方法迁移到基于反应的应用程序。在这个过程中，我遇到了一个与 url 相关的问题。在我的网站中，在服务器端，我使用 Url Rewrite 功能将 url 映射到正确的控制器。但我无法弄清楚如何在反应路由器中处理这个事情。我当前的反应路由器代码如下所示

<BrowserRouter>
    <Route exact path="/" component={Home}/>
    <Route path="/black-forest" component={Product}/>
    <Route path="/cakes" component={ProductList}/>
</BrowserRouter>

我为构建原型而编写的这段代码。但理想情况下，有许多不同的 url 可以指向 ProductList 组件。同样有很多url可以指向Product组件。

例如， 以下 url 指向 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 个这样的 url，它们是使用服务器端 UrlRewrite 创建的，因此它们没有遵循特定的模式。这些 url 主要指向 ProductList 或 Product 组件。

如何在我的 react 路由器配置中为所有这些 url 创建路径？任何指针将不胜感激。

Answer 1

您可能有一个单独的端点来检查请求的 url，它返回诸如“产品”或“产品列表”之类的页面类型，并且基于此结果，您可以加载更多数据

例如，假设您有http://www.example.com/api/urlcheck

在您的路由器中：

<Route exact path="/" component={ Home } />
<Route path="/:customPath" component={ Wrapper } />

在包装器中

constructor(props) {
  super(props)
  this.state={
    componentName: null
  }
}

componentDidMount() {
  let pathname = this.props.location.pathname.substr(1)
  // alternatively you can get pathname from this.props.location.match.params.customPath
  fetch(/* send request to http://www.example.com/api/urlcheck with pathname */)
  .then((response)=>{ this.setState({componentName: response.componentName }) })
}

render (){
  const { componentName } = this.state

  if(componentName === 'Product') return <Product />
  else if(componentName === 'ProductList') return <ProductList />
}

在 Product 或 ProductList 组件中，您可以以类似的方式通过 id 或任何其他键请求特定的数据集。

但请记住，如果 SEO 是一个大块，您很可能希望进行服务器端渲染，这在上面的示例中没有发生。 componentDidMount 仅在浏览器中呈现，您必须将其替换为 componentWillMount（反应生命周期中唯一在 SSR 上运行的函数）。

SSR 有点麻烦，尤其是对于基于其他请求的响应的请求。 Redux-saga 使用这种东西让生活变得如此轻松，所以我建议在你的情况下也使用 saga 方式。

您可以查看react-saga-universal 以快速启动并运行 saga 和 SSR。