Javascript 美化URL

我的公司有如下URL：

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

我们希望url如下所示：

    http://helloworld.com/product-persian

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

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'))

将筛选器应用于当前url时，它如下所示：

    http://helloworld.com/product-persian

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

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'))

我们希望过滤器保持不变。因此，我们想要的新url将显示以下内容：

    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框架时，您使用哪些方法来执行此操作？

要使用如下URL：

http://helloworld.com/product-persian

，react路由器是一个不错的选择

这样写：

    http://helloworld.com/product-persian

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

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'))

从“React”导入React
从“react dom”导入react dom
从“react Router”导入{Router，Route，browserHistory}
const Routes=React.createClass({
render（）{
返回(
{/*单一产品路线*/}
{/*带筛选器参数路由的产品*/}
)
}
})
ReactDOM.render（，document.getElementById（'app'））

在这个代码示例中，您在URL上使用

params

，在组件

sigleProductComponent

中使用

this.props.params.productName

或

this.props.params.filterData

调用此属性

此道具从

react路由器
组件传递

我希望此代码对您有所帮助。
谢谢您的回复！在做了几天的另一个项目后，回到这个话题。我们已经在使用react路由器，您的一些建议已经到位。例如，
：productName
。我们希望从uri中删除
&filter=
，并将其替换为特定实例上过滤器参数的名称。查看您提供的内容（再次感谢您），看起来我们仍然会显示
？过滤器…
。我看得不对吗？