react的路由使用（持续更新）

在这一段时间的工作中，我遇到了两个比较经常使用的路由的用途。

路由传参

这次遇到的情况是，一个页面的某一行点击之后，进入一个新的页面，但是在这个页面上操作的时候，需要用到上一个页面上的一些信息，而且这个信息是跟上一个页面点击进来的那一行的id相关，也不能把它存储到全局的stores里面，于是我就犯了难。
然后导师告诉我，可以用react的路由传参方法来进行参数的传递。
首先，他在路由的配置页面加上了一个参数

<Route path={`${baseUrl}/versions/:sid/:serviceType`} exact={true} component={VersionList} />
 <Route path={`${baseUrl}/versions/:sid/:vid/build-history`} exact={true} component={HistoryList} />

这里的servicetype和vid就是需要传递的参数。
而在母界面，也就是参数的原始位置，需要这样进行更改：

 <ALink
              onClick={() => history.push(`/manage/modelUploadManage/versions/${this.sid}/${entity.id}/build-history`)}
              disabled={this.serviceType === 'default'}>
<Link to={{ pathname: `/manage/modelUploadManage/versions/${file.id}/${file.serviceType}` }}>

而在需要使用这些参数的子界面，则需要对参数进行如下提取：

get serviceType() {
    return this.props.match!.params.serviceType;
  }

通过props.match.params来获取参数

路由与字面量

如果路由中有字面量，则需要使用``这个符号将路径括起来，代替之前的‘’
同时，字面量需要使用${}括起来

<Link to={{ pathname: `/manage/modelUploadManage/versions/${file.id}/${file.serviceType}` }}>
              {this.t('ProjectsViewManage:Version')}
            </Link>