在动态路径反应路由器(Dynamic paths in react router)

我试图从传统的Web应用程序的方式迁移我的网站反应基于应用程序。 在这个过程中，我坚持了相关URL的问题。 在我的网站，在服务器端我使用URL重写功能将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因此他们没有遵循特定的模式。 这些网址大多会向任何指向ProductList或Product的组成部分。

如何创建在我反应过来的路由器配置所有这些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 />
}

在以类似的方式产品或产品列表组件可以请求通过ID特定的数据集或其他任何按键。

但请记住，如果SEO是一个很大的一块，你最有可能想拥有服务器端渲染，这是不是在发生例如上面。 componentDidMount使得只有在浏览器中，你就会有（在反应上SSR运行生命周期的唯一功能），以取代与componentWillMount。

SSR是有点痛，尤其是那些基于其他请求的响应请求。 终极版，传奇，让生活与这种东西就轻松多了，所以我建议你去传奇的方式在你的情况也是如此。

你可以看看反应，传奇万能迅速爬起来，并与传奇和SSR运行。

文章来源: Dynamic paths in react router