Question

我的公司有这样的网址：

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

我们希望网址看起来像这样：

    http://helloworld.com/product-persian

当过滤器应用于当前网址时，它看起来像这样：

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

我们希望过滤器保持不变。所以我们想要的新网址会显示出来：

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

使用react，是否有最佳的原生方式？我简要地查看了https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls并简要介绍了redis。在使用react框架时，您使用了哪些方法来执行此操作？

Answer 1

要使用以下网址： 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组件传递。

我希望这段代码可以帮助你。

反应美化网址

1 个答案: