react路由跳转，实现传参的3种方式：params、search和state

一.父页面

import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'
import MynavLink from '../../components/mynavLink'
import Message from './message'
import News from './news'
import Infos from './infos'
class Home extends Component {
  render() {
    return (
      <div>
        <div>
          <h3>3种不同的参数传递方法：</h3>
          <MynavLink to="/Home/Messages">messages</MynavLink>
          <MynavLink to="/Home/News">News</MynavLink>
          <MynavLink to="/Home/Infos">Infos</MynavLink>
        </div>
        <div>
          {/* switch实现单一匹配，提高代码匹配效率，匹配上一个就停止路由继续匹配 */}
          {/* exact={true}表示严格匹配  严格模式不要随便开启  有时候会导致无法匹配二级路由 */}
          {/* Redirect是重定向，一般写在所有路由的最下方，当谁都匹配不上的时候，进行页面重定向 */}
          <Switch>
            <Route path="/Home/Messages" component={Message} />
            <Route path="/Home/News" component={News} />
            <Route path="/Home/Infos" component={Infos} />
            <Redirect to="/Home/Messages"/>
          </Switch>
        </div>
      </div>
    );
  }
}
export default Home;

二.3个子页面

方式一：params参数

1.index页面

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import Msgdetail from './detail';
class Message extends Component {
  state={msgArr:[
    {id:'01',title:'消息1'},
    {id:'02',title:'消息2'},
    {id:'03',title:'消息3'}
  ]}
  //编程式路由导航
  pushShow=(id,title)=>{
    return()=>{
      //push路由跳转+params参数
      this.props.history.push(`/Home/Messages/detail/${id}/${title}`)
    }
  }
  replaceShow=(id,title)=>{
    //replace路由跳转+params参数
    this.props.history.replace(`/Home/Messages/detail/${id}/${title}`)
  }
  render() {
    const {msgArr}=this.state;
    return (
      <div>
         <ul>
            {  
            msgArr.map((msg)=>{
              return  <li key={msg.id}>
                        {/* 路由链接携带params参数 */}
                        <Link to={`/Home/Messages/detail/${msg.id}/${msg.title}`}>{msg.title}</Link>
                        &nbsp;<button type="button" onClick={this.pushShow(msg.id,msg.title)}>push跳转</button> 
                        &nbsp;<button type="button" onClick={()=>this.replaceShow(msg.id,msg.title)}>replace跳转</button>             
                     </li>
            })
            }
          </ul>
          {/* 注册路由，声明参数 */}
          <Route path="/Home/Messages/detail/:id/:title"  component={Msgdetail}/>
      </div>
    );
  }
}

export default Message;

2..detail页面

import React, { Component } from 'react';

class Msgdetail extends Component {
  state={msgArr:[
    {id:'01',conent:'今天新奇感谢哦JXDPK11111111'},
    {id:'02',conent:'今天新奇感谢哦JXDPK222222222'},
    {id:'03',conent:'今天新奇感谢哦JXDPK33333333'}
  ]}
  render() {
    // 接收路由params参数
    const {id,title}=this.props.match.params;
    const msg=this.state.msgArr.find((msg)=>{
        return msg.id===id;   
    })||{};
    return (
      <div>
         <p>Title:{title}</p>
         <p>Content:{msg.conent}</p>
      </div>
    );
  }
}

export default Msgdetail;

方式二：search参数

1.index页面

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import Newsdetail from './detail'
class News extends Component {
  state={newsArr:[
    {id:'01',title:'新闻1'},
    {id:'02',title:'新闻2'},
    {id:'03',title:'新闻3'}
  ]}
  //编程式路由导航
  pushShow=(id,title)=>{
    return()=>{
      //push路由跳转+search参数
      this.props.history.push(`/Home/News/detail/?id=${id}&title=${title}`)
    }
  }
  replaceShow=(id,title)=>{
    //replace路由跳转+search参数
    this.props.history.replace(`/Home/News/detail/?id=${id}&title=${title}`)
  }
  render() {
    const {newsArr}=this.state;
    return (
      <div>
          <ul>
            {  
            newsArr.map((news)=>{
              return  <li key={news.id}>
                        {/* 路由链接携带search参数 */}
                        <Link to={`/Home/News/detail/?id=${news.id}&title=${news.title}`}>{news.title}</Link>
                        &nbsp;<button type="button" onClick={this.pushShow(news.id,news.title)}>push跳转</button> 
                        &nbsp;<button type="button" onClick={()=>this.replaceShow(news.id,news.title)}>replace跳转</button>
                      </li>
            })
            }

          </ul>
          {/* 注册路由，search参数无需声明 */}
          <Route path="/Home/News/detail"  component={Newsdetail}/>
      </div>
    );
  }
}

export default News;

2..detail页面

import React, { Component } from 'react';
import qs from 'querystring'
class Newsdetail extends Component {
  state={newArr:[
    {id:'01',conent:'今天新奇感谢哦JXDPK11111111'},
    {id:'02',conent:'今天新奇感谢哦JXDPK222222222'},
    {id:'03',conent:'今天新奇感谢哦JXDPK33333333'}
  ]}
  render() {
    // 接收路由params参数
    const {search}=this.props.location;
    const {id,title}=qs.parse(search.slice(1));
    const news=this.state.newArr.find((news)=>{
        return news.id===id;   
    })||{};
    return (
      <div>
         <p>Title:{title}</p>
         <p>Content:{news.conent}</p>
      </div>
    );
  }
}

export default Newsdetail;

方式三：state参数

1.index页面

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import Infosdetail from './detail';
class Infos extends Component {
  state={infosArr:[
    {id:'01',title:'消息1'},
    {id:'02',title:'消息2'},
    {id:'03',title:'消息3'}
  ]}
  //编程式路由导航
  pushShow=(id,title)=>{
    return()=>{
      //push路由跳转+state参数
      this.props.history.push('/Home/Infos/detail',{id,title})
    }
  }
  replaceShow=(id,title)=>{
    //replace路由跳转+state参数
    this.props.history.replace('/Home/Infos/detail',{id,title})
  }
  render() {
    const {infosArr}=this.state;
    return (
      <div>
         <ul>
            {  
            infosArr.map((info)=>{
              return  <li key={info.id}>
                        {/* 路由,传递state参数  地址栏不体现传递的参数信息 */}
                        <Link to={{pathname:'/Home/Infos/detail',state:{id:info.id,title:info.title}}}>{info.title}</Link>   
                        &nbsp;<button type="button" onClick={this.pushShow(info.id,info.title)}>push跳转</button> 
                        &nbsp;<button type="button" onClick={()=>this.replaceShow(info.id,info.title)}>replace跳转</button>           
                      </li>
            })
            }
          </ul>
          {/* 注册路由，声明参数 */}
          <Route path="/Home/Infos/detail"  component={Infosdetail}/>
      </div>
    );
  }
}

export default Infos;

2..detail页面

import React, { Component } from 'react';

class Infosdetail extends Component {
  state={infosArr:[
    {id:'01',conent:'今天新奇感谢哦JXDPK11111111'},
    {id:'02',conent:'今天新奇感谢哦JXDPK222222222'},
    {id:'03',conent:'今天新奇感谢哦JXDPK33333333'}
  ]}
  render() {
    // 接收路由state参数
    const {id,title}=this.props.location.state;
    const info=this.state.infosArr.find((info)=>{
        return info.id===id;   
    })||{};
    return (
      <div>
         <p>Title:{title}</p>
         <p>Content:{info.conent}</p>
      </div>
    );
  }
}

export default Infosdetail;