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>
    }
}

两者效果是一样的。