React Router路由传参方式总结

首先我们要知道一个前提，路由传递的参数我们可以通过props里面的属性来获取。只要组件是被<Router>组件的<component>定义和指派的，这个组件自然就有了props的match，history和location属性。

了解了这个，接下来我们进入正题：

1.动态路由用法一：（：id法）通过match.params获取参数

<Link exact to={`${match.path}/foodlist/3`} component={FondList}/>  </Link>

<Switch>

    <Route path={`${match.path}/foodlist/:id`} component={FondList}/> </Route

</Switch>

const FoodList = ({match})=>{     //   FoodList是通过component渲染出来的，所有它有props的match属性。

     <div>FondList-{match.params.id}</div>                //此时id就被渲染出来了

  }

2.动态路由用法二：（？id法）不建议使用：打印出来发现没有可以直接获取？号后面值的方法，我们可以自己封装一个方法或者使用第三方的库。所以不建议使用？传参

<Link exact to={`${match.path}/foodlist？id=3`} component={FondList}/> </Link>
<Switch>

    <Route path={`${match.path}/foodlist`} component={FondList}/> </Route

</Switch>

const FoodList = (props)=>{

    console.log(props)         //打印出来发现没有可以直接获取？号后面值的方法，我们可以自己封装一个方法或者使用第三方的库。所以不建议使用？传参

    <div>FondList</div>

  }

3.事件点击跳转（编程式导航）

通过this.props.history.push跳转路由，通过 props.location.state获取参数。
class FoodList extends Component{

    render(){

       let  {match,location,history} =this.props

       return (

          <div>foodlist={match.parmas.id}</div>

          <button onCLick={this.goto.bind(this)}>foodmenu</button>

        )

   }

    goto(){

       this.props.history.push('/food/foodmenu',{name:"kaiqin"})       //path有两个参数，第一个是path路径，第二个是state参数。

    }

}

const FoodMenu =(props){

    return <div>foodmenu-{props.location.state.name}</div>   //通过 props.location.state获取参数。

}

<Link exact to={`${match.path}/foodlist/3`} component={FondList}/>  </Link>

<Switch>

           <Route path={`${match.path}/foodlist/:id`} component={FondList}/> </Route

</Switch>

*另再附赠你们一个小知识点：

在定义子路由的时候，当前路径通过match.path来写。match.path这样写的好处，不管上一层路由多长，写这个就都能读出来，不用手动去写了。

巴特西

React Router路由传参方式总结

最新文章

热门文章