react中link参数传递以及url乱码解决

react中link参数传递以及url乱码解决

1.可以通过动态路由的方式进行参数传递

​ 传递：path="/acticle/:id"

render() {
        return (
            <div>
                <Link to="/acticle/1?"> 文章一</Link>
                <Link to="/acticle/2"> 文章二</Link>
                <Route path="/acticle/:id" component={ArticleDetail}></Route>
            </div>
        )
    }

接收参数：this.props.match.params.id

2.可以通过query进行传参

​ 传递：path="/acticle?title=文章一"

export default class Acticle extends Component {
    render() {
        return (
            <div>
                <Link to="/acticle/1?title=文章1"> 文章一</Link>
                <Link to="/acticle/2"> 文章二</Link>
                <Route path="/acticle/:id" component={ArticleDetail}></Route>
            </div>
        )
    }
}

​ 接收参数：Detail组件内部可以通过 this.props.location.search可以获取到 “?title=文章一”

url乱码解决

export default class Acticle extends Component {
    
    render() {
        console.log(this.props.location.search)
        var str =this.props.location.search
        var start = str.indexOf("=")
        var newStr = str.substr(start+1,str.length)
        console.log(decodeURI())
        return (
            <div>
                <h2>{decodeURI(newStr)}</h2>
                文章
            </div>
        )
    }
}

3.可以通过state进行隐式传参（同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏)

传递： to={{pathname:'/acticle/2',state:{title:'文章2'}}}

export default class Acticle extends Component {
    render() {
        return (
            <div>
                <Link to={{pathname:'/acticle/1',state:{title:'qw'}}}> 文章一</Link>
                <Link to="/acticle/2"> 文章二</Link>
                <Route path="/acticle/:id" component={ArticleDetail}></Route>
            </div>
        )
    }
}

​ 接收参数：Detail组件内部可以通过 this.props.location.state.title可以获取到

注意：通过state传参刷新有时候参数会消失，不晓得为什么？有知道的欢迎解答