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

兩者效果是一樣的。