react-router和漂亮的網址

Question

使用react-router和漂亮的URL的最佳方式是什麼？ 所有網址都存儲在數據庫中（總金額約爲400,000）。 當我關注鏈接時，我需要通過AJAX請求解析來自服務器的呈現組件，並將其呈現。

謝謝！

Answer 1

React路由器可以採用可以由數據庫驅動的動態值。

舉例來說，如果你有一個產品數據庫，你可以有一個像這樣的鏈接：

<Link to="/products/1234/product_name">Product</Link> 

而且您的組件會這樣定義：

<Route path="/products/:id/:url_title" component={Products} /> 

Answer 2

我找到答案這個問題。使用react-router，您可以使用Route的getComponent方法動態解析組件。 例如：

import ProductPage from '...' 
import CategoryPage from '...' 

const MAP_PAGE_TYPE_TO_COMPONENT = { 
    'productPage': ProductPage, 
    'categoryPage': CategoryPage 

}; 

.... 

const getComponent = (location, callback) => { 
    requestToServer(location.pathname) 
    .then(function(response){ 
     const Component = MAP_PAGE_TYPE_TO_COMPONENT[response.pageType]; 
     callback(null, <Component items = { response.items } />); 
    }) 
    .catch(callback) 
}; 

.... 

<Route 
    path='*' 
    getComponent = { getComponent } 
/> 

你應該叫callback功能與null作爲第一個參數，如果沒有錯誤，並<Component />作爲第二個參數。