React中匹配路由参数的方式

模糊匹配

默认情况下,路由中的规则是模糊匹配的,如果路由可以部分匹配成功,就会展示这个路由对应的组件。看下面的例子:

<Link to="/movie/top250/10">电影</Link>
<Route path="/movie" component={Movie}></Route>

虽然Link标签的to属性与Route标签的path不完全相同,但是由于模糊匹配规则,点击电影链接,还是可以展示Movie组件。

精确匹配

如果想让路由规则进行精确匹配,可以为Route添加exact属性,表示启用精确匹配模式。看下面的例子:

<Link to="/movie/top250/10">电影</Link>
<Route path="/movie" component={Movie} exact></Route>

此时由于电影组件启用了精确匹配模式,因此Link元素将不再能够链接到该组件。

在路由中用冒号匹配参数

精确匹配模式下,"/movie"已经不能匹配到"/movie/top250/10"的链接了,要想让其在精确匹配模式下能够再次匹配到,除了将path写为"/movie/top250/10"这种方式以外,还可以通过参数来匹配。
如果要匹配参数,可以在匹配规则中使用:修饰符,表示这个位置匹配到的是参数。看下面的例子:

<Link to="/movie/top250/10">电影</Link>
<Route path="/movie/:type/:id" component={Movie} exact></Route>

这样两者之间又可以准确匹配到了。
如果在Movie组件中,我们想获取通过路由匹配到的参数,可以在Movie组件中这么做:

import React from "react"

export default class Movie extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}

    }
    render(){
        return <div>
            Movie---{this.props.match.params.type}---{this.props.match.params.id}
        </div>
    }
}

即使用this.props.match.params.*** 来访问路由中匹配到的参数。
为了方便使用,我们可以把匹配到的路由参数存放到组件的state中,同样是上面的Movie组件,改写成:

import React from "react"

export default class Movie extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            routeParams: props.match.params
        }

    }
    render(){
        return <div>
            Movie---{this.state.routeParams.type}---{this.state.routeParams.id}
        </div>
    }
}

两者效果是一样的。

上一篇:获取豆瓣网1980-2010年电影详情


下一篇:【Python】爬取豆瓣电影Top250排行榜