React动态路由

动态路由传参有三种方式：

params方式

• 注册路由的时候通过:params的形式来声明

  {/* 通过:id声明我们要传递的参数是id */}
  <Route path="/detail/:id" component={Detail}></Route>

• 路由匹配

  <ul>
                      {
                          this.state.arr.map(item => (
                              <li key={item.id}>
                                  <NavLink to={'/detail/' + item.id}>{item.tit}</NavLink>
                              </li>
                          ))
                      }
                  </ul>

  <ul>
                      {
                          this.state.arr.map(item => (
                              <li onClick={() => { this.props.history.push('/detail/' + item.id) }} key={item.id}>
                                  {item.tit}
                              </li>
                          ))
                      }
                  </ul>

• 在组件中获取params方式传递参数

  const { id } = this.props.match.params

query方式

• query方式传递的参数不需要在注册路由的时候声明

  <Route path="/details" component={Details}></Route>

• 路由匹配

  <ul>
                      {
                          this.state.arr.map(item => (
                              <li key={item.id}>
                                  <NavLink to={'/details?id=' + item.id}>{item.tit}</NavLink>
                              </li>
                          ))
                      }
                  </ul>

• 在组件中获取query方式传递的参数

  this.props.location.search.split('=')[1]

state方式

• state方式传递的参数也不需要在注册路由的时候声明

  <Route path="/dstate" component={Dstate}></Route>

• 路由匹配

  <ul>
                      {
                          this.state.arr.map(item => (
                              <li key={item.id}>
                                  <NavLink to={{ pathname: '/dstate', state: { id: 5 } }}>{item.tit}</NavLink>
                              </li>
                          ))
                      }
                  </ul>

• 在组件中获取传递的参数

   console.log(this.props.location.state)

•