陣營美化網址

Question

我公司擁有的網址是這樣的：

http://helloworld.com/product?filter[category][0]=persian 

我們想要的網址看起來像這樣：

http://helloworld.com/product-persian 

當過濾器被應用到當前的URL，它看起來是這樣的：

http://helloworld.com/product?filter[category][0]=persian&filter[style][0]=border 

我們想過濾器保持不變。所以，我們希望新的URL會顯示此：

http://helloworld.com/product-persian&filter[style][0]=border 

使用反應過來，是有這樣做的最佳生方式？我簡要地看了一下https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls並簡要介紹了redis。在使用反應框架時，您使用什麼方法來做到這一點？

Answer 1

要使用這樣的URL： http://helloworld.com/product-persian，react-router是不錯的選擇。

寫這樣的：

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Router, Route, browserHistory } from 'react-router' 

const Routes = React.createClass({ 
    render(){ 
    return(
     <Router history={ browserHistory }> 
     <Route path='/home' component={ homeComponent }/> 
     <Route path='/product' component={ productsComponent }> 
      <Route path='/product-:productName' component={ sigleProductComponent }/> {/* Single product route */} 
      <Route path='/product-:productName&filter=:filterData' component={ productsComponent }/> {/* Product with filter params route */} 
     </Route> 
     </Router> 
    ) 
    } 
}) 

ReactDOM.render(<Routes />, document.getElementById('app')) 

在此代碼示例，你在網址中使用了params，來調用這個道具使用this.props.params.productName或this.props.params.filterData在組件sigleProductComponent。

此道具通過react-router組件。

我希望這段代碼能幫助你。