1.params传参

  1. //路由链接，这里传入参数
  2. <Link to={`/home/news/detail/${item.id}/${item.name}`}>{item.title}</Link>
  3. //路由匹配参数，注册路由
  4.  <Route path="/home/news/detail/:id/:name" component={Detail}></Route>
  5.  //在子路由组件中中获取参数
  6.  const {id,name}=this.props.match.params

路由匹配的地方与传入的参数需要保持一致
父组件路由new.jsx

  1. import React, { Component } from 'react'
  2. import  "./index.css"
  3. import {Link,Route,Redirect} from 'react-router-dom'
  4. import Detail from './Deatil'
  5. export default class index extends Component {
  6.     state={
  7.         obj:[{
  8.             id:"01",
  9.             title:"我是新闻组件1",
  10.             name:"今天心情不错"
  11.         },
  12.         {
  13.             id:"02",
  14.             title:"我是新闻组件2",
  15.             name:"今天天气不错"
  16.         },
  17.         {
  18.             id:"03",
  19.             title:"我是新闻组件3",
  20.             name:"今天需要工作"
  21.         },
  22.         {
  23.             id:"04",
  24.             title:"我是新闻组件4",
  25.             name:"今天出入玩"
  26.         },
  27.         {
  28.             id:"05",
  29.             title:"我是新闻组件5",
  30.             name:"我也不知道干什么"
  31.         },
  32.         {
  33.             id:"06",
  34.             title:"我是新闻组件6",
  35.             name:"我知道我的目标"
  36.         },
  37.     ]
  38.       }
  39.     render() {
  40.     const {obj}= this.state
  41.         return (
  42.             <div>
  43.               <ul className="newsList">
  44.                  {
  45.                     obj.map(item=>{
  46.                          return <li key={item.id}>
  48.                              <Link to={`/home/news/detail/${item.id}/${item.name}`}>{item.title}</Link>
  49.                          </li>
  50.                      })
  51.                  }
  52.               </ul>  
  54.               <div className="dispaly">
  55.                   <Route path="/home/news/detail/:id/:name" component={Detail}></Route>
  56.                   <Redirect to="/home/news/detail/01/今天心情不错"></Redirect>
  57.               </div>
  58.               <hr/>
  59.             </div>
  60.         )
  61.     }
  62. }

子组件路由detail.jsx

  1. import React, { Component } from 'react'
  2. const list=[{
  3.     id:"01",
  4.    content:"命里有时终须有，命里无时莫强求。谋事在人，成事在天。很多事情是人力不能勉强的，随缘就好"
  5. },
  6. {
  7.     id:"02",
  8.     content:"刻意为之的事情有时候反而容易失败，有时候一切顺其自然，不用人力强行干涉，反而是最好的办法。"
  9. },
  10. {
  11.     id:"03",
  12.     content:"人心本善，但是总有各种各样的诱惑让人偏离善的本心，因此要师长朋友加以劝勉。就像山中的钟，随时敲打才能发出响声。"
  13. },
  14. {
  15.     id:"04",
  16.     content:"月圆缺，水满溢，事情到了极致一定会遭受祸患，只有懂得知足，才是富足。"
  17. },
  18. {
  19.     id:"05",
  20.     content:"　口舌无刃，却丝毫不逊于利剑。不要随便指摘，能与人方便处，多些鼓励就好。"
  21. },
  22. {
  23.     id:"06",
  24.     content:"磨刀时怕不锋利，但是太锋利了又容易伤人手指；追求财富时怕财富不多，财富太多之后又被财所累。"
  25. },
  26. ]
  28. export default class index extends Component {
  30.     render() {
  31.        const {id,name}=this.props.match.params
  32.        const obj=list.find(item=>item.id===id)
  33.         return (
  34.             <div>        
  35.                 <ul>
  36.                     <li>Id:{id}</li>
  37.                     <li>Name:{name}</li>
  38.                     <li>Content:{obj.content}</li>
  39.                 </ul>
  41.             </div>
  42.         )
  43.     }
  44. }

2.search传参

  1. //注册路由，将需要传递的参数用query传参的方式
  2.  <Link to={`/home/message/sal?id=${item.id}&title=${item.title}`}>{item.title}</Link>
  3.  //路由组件中的路径正常传入
  4.   <Route path="/home/message/sal" component={Sal}></Route>
  5.   //在需要使用参数的组件中引入React自带的querystring包
  6.   import qs from 'querystring'
  7.   //解析search参数
  8.    let {id,title}=qs.parse(search.slice(1))
  9.    //使用参数

父组件路由message.jsx

  1. import React, { Component } from 'react'
  2. import {Link,Route,Redirect} from 'react-router-dom'
  3. import Sal from './Sal'
  4. import "./index.css"
  5. export default class index extends Component {
  6.     state={
  7.         data:[
  8.             {
  9.                 id:"01",
  10.                 title:"我是消息1"
  11.             },
  12.             {
  13.                 id:"02",
  14.                 title:"我是消息2"
  15.             },
  16.             {
  17.                 id:"03",
  18.                 title:"我是消息3"
  19.             },
  20.             {
  21.                 id:"04",
  22.                 title:"我是消息4"
  23.             },
  24.             {
  25.                 id:"05",
  26.                 title:"我是消息5"
  27.             }, 
  28.             {
  29.                 id:"06",
  30.                 title:"我是消息6"
  31.             }
  32.         ]
  33.     }
  34.     render() {
  35.         const {data}=this.state
  36.         return (
  37.             <div>
  38.                 <ul className="messageList">
  39.               {
  40.                   data.map(item=>{
  41.                       return <li key={item.id}>
  42.                           <Link to={`/home/message/sal?id=${item.id}&title=${item.title}`}>{item.title}</Link>
  43.                       </li>
  44.                   })
  45.               }
  46.                 </ul>
  48.             <div className="displayArea">
  49.                <Route path="/home/message/sal" component={Sal}></Route>
  50.                <Redirect to="/home/message/sal?id=01&title=我是消息1"></Redirect>
  51.             </div>
  52.             </div>
  53.         )
  54.     }
  55. }

子组件sal.jsx

  1. import React, { Component } from 'react'
  2. import qs from 'querystring'
  4. export default class index extends Component {
  5.     state={list:[{
  6.         id:"01",
  7.        content:"命里有时终须有，命里无时莫强求。谋事在人，成事在天。很多事情是人力不能勉强的，随缘就好"
  8.     },
  9.     {
  10.         id:"02",
  11.         content:"刻意为之的事情有时候反而容易失败，有时候一切顺其自然，不用人力强行干涉，反而是最好的办法。"
  12.     },
  13.     {
  14.         id:"03",
  15.         content:"人心本善，但是总有各种各样的诱惑让人偏离善的本心，因此要师长朋友加以劝勉。就像山中的钟，随时敲打才能发出响声。"
  16.     },
  17.     {
  18.         id:"04",
  19.         content:"月圆缺，水满溢，事情到了极致一定会遭受祸患，只有懂得知足，才是富足。"
  20.     },
  21.     {
  22.         id:"05",
  23.         content:"　口舌无刃，却丝毫不逊于利剑。不要随便指摘，能与人方便处，多些鼓励就好。"
  24.     },
  25.     {
  26.         id:"06",
  27.         content:"磨刀时怕不锋利，但是太锋利了又容易伤人手指；追求财富时怕财富不多，财富太多之后又被财所累。"
  28.     }
  29.     ]}
  30.     render() {
  31.        let {search}=this.props.location
  32.        let {id,title}=qs.parse(search.slice(1))
  33.        let {content}=this.state.list.find(item=>item.id==id)
  34.        console.log(content)
  35.         return (
  36.             <div>
  37.               <ul>
  38.                   <li>ID:{id}</li>
  39.                   <li>Title:{title}</li>
  40.                   <li>content:{content}</li>
  41.               </ul>
  42.             </div>
  43.         )
  44.     }
  45. }

3.state传参

不会将参数放在地址栏中，跟上面不同。无需初始渲染，就可以默认将第一项作为打开页面的第一项。

  1. //路由注册，使用路由
  2. //动态传进去一个对象，第一项是路径，第二项是一个对象state
  3. <Link to={{pathname:'/about/col',state:{id:item.id,title:item.title}}}>{item.title}</Link>
  4. //路由组件路径不变
  5.   <Route path='/about/col' component={Col}></Route>
  6.   //获得参数，在this.props.location.state
  7.    let {state:{id,title}}=this.props.location

About.jsx

  1. import React, { Component } from 'react'
  2. import {Link,Route} from 'react-router-dom'
  3. import Col from './Col'
  4. export default class index extends Component {
  5.     state={
  6.         result:[
  7.             {
  8.                 id:"01",
  9.                 title:"我是关于1"
  10.             },
  11.             {
  12.                 id:"02",
  13.                 title:"我是关于2"
  14.             },
  15.             {
  16.                 id:"03",
  17.                 title:"我是关于3"
  18.             },
  19.             {
  20.                 id:"04",
  21.                 title:"我是关于4"
  22.             }
  23.         ]
  24.     }
  25.     render() {
  26.         const {result}=this.state
  27.         console.log(result)
  28.         return (
  29.             <div> 
  30.             <h1>about组件</h1>
  31.             <hr/>
  32.             <ul>
  33.             {
  34.          result.map(item=>{
  36.        return(
  37.         <li key={item.id}>
  38.          <Link to={{pathname:'/about/col',state:{id:item.id,title:item.title}}}>{item.title}</Link>
  39.          </li>
  40.        )
  43.          })
  44.             }
  45.             </ul>
  46.              <Route path='/about/col' component={Col}></Route>
  47.             </div>
  48.         )
  49.     }
  50. }

子路由中Col.jsx

  1. import React, { Component } from 'react'
  3. export default class index extends Component {
  5.     render() {
  6.       let {state:{id,title}}=this.props.location
  7.         return (
  8.             <div>
  9.                 <ul>
  10.                     <li>ID:{id}</li>
  11.                     <li>Title:{title}</li>
  12.                 </ul>
  13.             </div>
  14.         )
  15.     }
  16. }