Question

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

<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组件。

如何在反应路由器配置中为所有这些网址创建路径？任何指针都将非常感激。

Answer 1

您可能有一个单独的端点来检查请求的网址，该网址返回的网页类型类似于＆＃39;产品＆＃39;或者＆＃39;产品列表＆＃39;并根据此结果，您可以加载更多数据

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

路由器中的

：

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

in 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使用这种东西让生活变得如此简单，所以我建议你也要在你的情况下采取传奇方式。

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

反应路由器

1 个答案: