React动态路由()

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

params方式

  • 注册路由的时候通过:params的形式来声明
    {/* 通过:id声明我们要传递的参数是id */}
{/* 通过:id声明我们要传递的参数是id */}<Route path="/detail/:id" component={Detail}></Route>
  • 路由匹配

                        {                       this.state.arr.map(item => (                          

    •                               {item.tit}                          
    •                       ))                   }              

                        {                       this.state.arr.map(item => (                          

    • { this.props.history.push(‘/detail/’ + item.id) }} key={item.id}>                               {item.tit}                          
    •                       ))                   }              

<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
const { id } = this.props.match.params

query方式

  • query方式传递的参数不需要在注册路由的时候声明
<Route path="/details" component={Details}></Route>
  • 路由匹配

                        {                       this.state.arr.map(item => (                          

    •                               {item.tit}                          
    •                       ))                   }              

<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]
this.props.location.search.split('=')[1]

state方式

  • state方式传递的参数也不需要在注册路由的时候声明
<Route path="/dstate" component={Dstate}></Route>
  • 路由匹配

                        {                       this.state.arr.map(item => (                          

    •                               {item.tit}                          
    •                       ))                   }              

<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)
 console.log(this.props.location.state)
————————

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

params方式

  • 注册路由的时候通过:params的形式来声明
    {/* 通过:id声明我们要传递的参数是id */}
{/* 通过:id声明我们要传递的参数是id */}<Route path="/detail/:id" component={Detail}></Route>
  • 路由匹配

                        {                       this.state.arr.map(item => (                          

    •                               {item.tit}                          
    •                       ))                   }              

                        {                       this.state.arr.map(item => (                          

    • { this.props.history.push(‘/detail/’ + item.id) }} key={item.id}>                               {item.tit}                          
    •                       ))                   }              

<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
const { id } = this.props.match.params

query方式

  • query方式传递的参数不需要在注册路由的时候声明
<Route path="/details" component={Details}></Route>
  • 路由匹配

                        {                       this.state.arr.map(item => (                          

    •                               {item.tit}                          
    •                       ))                   }              

<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]
this.props.location.search.split('=')[1]

state方式

  • state方式传递的参数也不需要在注册路由的时候声明
<Route path="/dstate" component={Dstate}></Route>
  • 路由匹配

                        {                       this.state.arr.map(item => (                          

    •                               {item.tit}                          
    •                       ))                   }              

<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)
 console.log(this.props.location.state)