react 3.x路由携带参数

路由跳转写待参数

	1、在主入口的路由路径中,末尾添加/:键名
		若传递多个参数
			以/:xx/:xx的形式添加
			
	2、在跳转的Link标签对应的路径中,末尾添加/键值
		
		其中若传递的值是变量:
			两种写法:
				1、路径为:{'xx/'+变量}  内部为引号
				2、路径为:{`x/${变量}`} 以es6写法,发反引号和${}

				加大括号是因为解析js语法
				
		若传递多个值
			两种写法:
				1、路径为:{'xx/'+变量+"/"+变量...};
				2、路径为:{`xx/${变量}/${变量}/xxx`};


	3、在对应的组件中,即可通过:{this.props.params.键名}获取到键值

代码示例:
主入口文件

import React ,{Component}from 'react';
// import User from './user'
import {Router,Route,hashHistory,IndexRoute,Link} from "react-router"
import Page from "./dpp"
import Two from './2'
import Three from "./3"
import Thre from "./4"
import Thr from "./5"

class App extends Component {

  render()
  {
    return (


        <div>
          
         
          <Router history={hashHistory}>
            <Route path="/" component={Page}></Route>
            //携带参数
            <Route path="/two/:uname/:upwd" component={Two}></Route>
            
            <Route path="/three" component={Three}>
                <IndexRoute  component={Thre}></IndexRoute>
                <Route path="/three/thr" component={Thr}></Route>
            </Route>
          </Router>

        </div>
      )
  }
}

export default App;

路由跳转组件:

import React ,{Component}from 'react';
import {Link} from 'react-router'

export default class Links extends Component{
	render()
	{
		var value="jeff and mike"
		var value2='12345'
		return(
			<ul>
			
              <li><Link to="/">首页</Link></li>
              //传递值
              <li><Link to={`/two/${value}/${value2}`}>第二页</Link></li>
              
              <li><Link to='/three'>第三页</Link></li>
            </ul>
		)
	}
}

接收参数的组件:

import React,{Component} from "react"
import Links from './link'
export default class Two extends Component{

	render()
	{
		return(
			<div>
				<Links/>
			第二页:{this.props.params.uname+this.props.params.upwd}

			</div>
		)
	}
}