react 3.x路由携带参数

﹏ヽ暗。殇╰゛Y 2021-07-24 12:27 438阅读 0赞

路由跳转写待参数
    
    	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>
    		)
    	}
    }