React五之页面传参

react页面传参三种方式
params方式
1、react-quick-start\src\views目录下新建other文件夹，在other目录下新建index.js

import { Component } from 'react';

class Other extends Component {
    state = { params: JSON.stringify(this.props.match.params)}
    render() {
      
      return (
        <div>
            其他页面
            页面参数：{this.state.params}
        </div>
      );
    }
}

export default Other;

说明：this.props.match.params.id，就可以接受到传递过来的参数（id）

2、配置路由
修改react-quick-start\src\views目录下的index.js

import Loadable from 'react-loadable';
import Loading from '../components/loading';

//需要将对外的普通组件需要进行懒加载
const Home = Loadable({
    loader: () => import('./home'),
    loading: Loading,
});

const Other = Loadable({
    loader: () => import('./other'),
    loading: Loading,
});

export {
    Home,
    Other
}

修改react-quick-start\src\routes目录下的index.js

import  {
    Home,
    Other
} from "../views";   // 引入页面
  
export const mainRoute = [
    {
        pathname:"/home",
        component: Home
    },
    {
        pathname:"/other/:id",
        component: Other
    }
];

3、页面跳转
修改react-quick-start\src\views\home目录下的index.js

import { Switch, Button } from 'antd';
import { Component } from 'react';
import { Link }from 'react-router-dom';
import intl from 'react-intl-universal';
import Cookies from 'js-cookie';

let isChecked = Cookies.get('lang') === "zh-CN" ? true : false;

class Home extends Component {

    render() {
      return (
        <div>
            {intl.get('INPUT_MOBILE')}
            <Switch checkedChildren="中文" unCheckedChildren="英文" defaultChecked={isChecked} onClick = {(isChecked) => {
                this.handleClick(isChecked)
              }}/>
            <div>
              方式一：通过params<br/>  
              <Link to={'/other/2'}>params-HTML方式跳转页面</Link>
              <Button onClick={() => {
                this.paramJS()
              }}>params-JS方式跳转页面</Button>
            </div>
        </div>
      );
    }
    handleClick = (isChecked) => { // 国际化的点击事件
      let lang = "en-US";
      if(isChecked) {
        lang = "zh-CN";
      }
    	Cookies.set('lang', lang, { expires: 7 });
      window.location.reload(true);
  	}
    paramJS = () => {
      this.props.history.push('/other/2')
    }
}

export default Home;

4、启动项目(项目根目录下执行yarn start)


query方式
1、react-quick-start\src\views\other目录下新建second.js

import { Component } from 'react';

class Other extends Component {
    state = { params: JSON.stringify(this.props.location.query)}
    render() {
      
      return (
        <div>
            其他页面-2
            页面参数：{this.state.params}
        </div>
      );
    }
}

export default Other;

说明：this.props.location.query，就可以接受到传递过来的参数
2、配置路由
修改react-quick-start\src\views目录下的index.js

import Loadable from 'react-loadable';
import Loading from '../components/loading';

//需要将对外的普通组件需要进行懒加载
const Home = Loadable({
    loader: () => import('./home'),
    loading: Loading,
});

const Other = Loadable({
    loader: () => import('./other'),
    loading: Loading,
});

const Second = Loadable({
    loader: () => import('./other/second'),
    loading: Loading,
});

export {
    Home,
    Other,
    Second
}

修改react-quick-start\src\routes目录下的index.js

import  {
    Home,
    Other,
    Second
} from "../views";   // 引入页面
  
export const mainRoute = [
    {
        pathname:"/home",
        component: Home
    },
    {
        pathname:"/other/:id",
        component: Other
    },
    {
        pathname:"/second",
        component: Second
    }
];

3、页面跳转
修改react-quick-start\src\views\home目录下的index.js

import { Switch, Button } from 'antd';
import { Component } from 'react';
import { Link }from 'react-router-dom';
import intl from 'react-intl-universal';
import Cookies from 'js-cookie';

let isChecked = Cookies.get('lang') === "zh-CN" ? true : false;

class Home extends Component {

    render() {
      return (
        <div>
            {intl.get('INPUT_MOBILE')}
            <Switch checkedChildren="中文" unCheckedChildren="英文" defaultChecked={isChecked} onClick = {(isChecked) => {
                this.handleClick(isChecked)
              }}/>
            <div>
              方式一：通过params<br/>  
              <Link to={'/other/2'}>params-HTML方式跳转页面</Link>
              <Button onClick={() => {
                this.paramJS()
              }}>params-JS方式跳转页面</Button>
            </div>
            <div>
              方式二：通过query<br/>  
              <Link to={{ pathname : '/second' , query : { name : 'small' }}}>query-HTML方式跳转页面</Link>
              <Button onClick={() => {
                this.queryJS()
              }}>query-JS方式跳转页面</Button>
            </div>
        </div>
      );
    }
    handleClick = (isChecked) => { // 国际化的点击事件
      let lang = "en-US";
      if(isChecked) {
        lang = "zh-CN";
      }
    	Cookies.set('lang', lang, { expires: 7 });
      window.location.reload(true);
  	}
    paramJS = () => {
      this.props.history.push('/other/2')
    }
    queryJS = () => {
      this.props.history.push({ pathname: '/second' ,query: { name: ' small'} })
    }
}

export default Home;

4、启动项目(项目根目录下执行yarn start)


state方式
1、react-quick-start\src\views\other目录下新建third.js

import { Component } from 'react';

class Other extends Component {
    state = { params: JSON.stringify(this.props.location.state)}
    render() {
      
      return (
        <div>
            其他页面-3
            页面参数：{this.state.params}
        </div>
      );
    }
}

export default Other;

说明：this.props.location.state，就可以接受到传递过来的参数
2、配置路由
修改react-quick-start\src\views目录下的index.js

import Loadable from 'react-loadable';
import Loading from '../components/loading';

//需要将对外的普通组件需要进行懒加载
const Home = Loadable({
    loader: () => import('./home'),
    loading: Loading,
});

const Other = Loadable({
    loader: () => import('./other'),
    loading: Loading,
});

const Second = Loadable({
    loader: () => import('./other/second'),
    loading: Loading,
});

const Third = Loadable({
    loader: () => import('./other/third'),
    loading: Loading,
});

export {
    Home,
    Other,
    Second,
    Third
}

修改react-quick-start\src\routes目录下的index.js

import  {
    Home,
    Other,
    Second,
    Third
} from "../views";   // 引入页面
  
export const mainRoute = [
    {
        pathname:"/home",
        component: Home
    },
    {
        pathname:"/other/:id",
        component: Other
    },
    {
        pathname:"/second",
        component: Second
    },
    {
        pathname:"/third",
        component: Third
    }
];

3、页面跳转
修改react-quick-start\src\views\home目录下的index.js

import { Switch, Button } from 'antd';
import { Component } from 'react';
import { Link }from 'react-router-dom';
import intl from 'react-intl-universal';
import Cookies from 'js-cookie';

let isChecked = Cookies.get('lang') === "zh-CN" ? true : false;

class Home extends Component {

    render() {
      return (
        <div>
            {intl.get('INPUT_MOBILE')}
            <Switch checkedChildren="中文" unCheckedChildren="英文" defaultChecked={isChecked} onClick = {(isChecked) => {
                this.handleClick(isChecked)
              }}/>
            <div>
              方式一：通过params<br/>  
              <Link to={'/other/2'}>params-HTML方式跳转页面</Link>
              <Button onClick={() => {
                this.paramJS()
              }}>params-JS方式跳转页面</Button>
            </div>
            <div>
              方式二：通过query<br/>  
              <Link to={{ pathname : '/second' , query : { name : 'small' }}}>query-HTML方式跳转页面</Link>
              <Button onClick={() => {
                this.queryJS()
              }}>query-JS方式跳转页面</Button>
            </div>
            <div>
              方式三：通过state<br/>  
              <Link to={{ pathname : '/third' , state : { name : 'small2' }}}>state-HTML方式跳转页面</Link>
              <Button onClick={() => {
                this.stateJS()
              }}>state-JS方式跳转页面</Button>
            </div>
        </div>
      );
    }
    handleClick = (isChecked) => { // 国际化的点击事件
      let lang = "en-US";
      if(isChecked) {
        lang = "zh-CN";
      }
    	Cookies.set('lang', lang, { expires: 7 });
      window.location.reload(true);
  	}
    paramJS = () => {
      this.props.history.push('/other/2')
    }
    queryJS = () => {
      this.props.history.push({ pathname: '/second' ,query: { name: ' small'} })
    }
    stateJS = () => {
      this.props.history.push({ pathname: '/third',state: {name : 'small2' } })
    }
}

export default Home;

4、启动项目(项目根目录下执行yarn start)


目录结构

github源码：https://github.com/smallgrey/react-advanced/tree/routing_parameters
码云：https://gitee.com/smallgrey/react-advanced/tree/routing_parameters