react入门之路由----react-router的跳转问题及动态跳转

目前加载3.0版本的路由：cnpm install --save [email protected]，安装3.0版本的路由；

学习资料：https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html

引包：

import {Router,Route,Redirect, IndexRoute,hashHistory} from 'react-router';//引入路由

 

render(){
    //debugger
    return(
        
          


           
                  
                  
                  
                  
            
          
    )
  }
}

ReactDOM.render((),document.getElementById("root"))
ReactDOM.render((),document.getElementById("root"))

 

同级路由的跳转，也就是一级路由；

路由传参：在地址栏是可见参数的；传递的参数是字符串/布尔值/数字等基本数据类型；对象或数组无法传递;

通过https://react-guide.github.io/react-router-cn/docs/API.html的API文档，可知，进入跳转的页面，可以通过{this.props.params.(传递的参数名)}；

具体见代码：

 

路由文件

                    
                   
                        
                  
                     
                      
                       
            

 

 

点击页面；

      		   新来的
      		   

      		   不是新来的
      		   

      		   你觉得呢
      		

跳转到的页面

	        我是bushi新来的！
	        	{
	        		//this.props.params.
	        	}
	        	{this.props.params.num}
	        	{this.props.params.id}
      

多个链接跳转到同一个页面；

 

接下来讲的是二级路由嵌套：

 

显示ui通过this.props.children进行ui显示；不然就无法显示ui；

 

多级路由嵌套也就类似于此种方法；

默认路由：

 

组件外部跳转：

 

 

 

hashHistory.push('/news/0/window')

 

react路由4.0版本的路由可以直接加载react-router-dom

 

注意几点：加载引包import，在react-router中会有两种模式，一种是hash模式，另外一种 浏览器模式（利用了history），下文重点介绍好hash模式，hash模式上线本地开发都是非常方便的，而BrowserRouter在上线的时候会比较麻烦一点，需要服务器的配置也会更麻烦一些。

 

import {
  HashRouter,
  BrowserRouter,
  Route,
  Link
} from 'react-router-dom'

在index.jsx文件中

   

页面内路由跳转（路由文件router.jsx）；

 

 

 loginQX==1?:}/>
  }/>
 
  
404
} />

这里需要通过exact这个属性表示完全匹配，实现单页面跳转，简称一级路由（父级【‘/index’】）

接下来我们将一级路由跳转进行分割开，有点感觉就是将路由进行组件化

二级子路由的页面内跳转：

    资产
    我的
    
        
        
         
Not Found
} />
    
 

 

exact： bool
若为 true，只有当访问地址严格匹配时激活样式才会应用

strict: bool
若为 true，只有当访问地址后缀斜杠严格匹配（有或无）时激活样式才会应用

单级路由跳转完成严格匹配的跳产生的，多级路由跳转访问斜杠后进行激活产生的。

通过以上的操作可以完成各级的路由的转换。

 

路由传参：传参方式，跟3.0版本一样，调取有些不一样，通过{match}获取参数；但必须要作为第一个参数；

class Son extends Component{
 	constructor({match},props,context){

 		super()
 		console.log(match);
 		console.log(props);
 		//console.log(context);
 		this.state={
 			match:match
 		}

 	}
  render(){
    return(
      

         组件传递问题！ 
          	{this.state.match.params.id}
      

如果在路由4.x中不存在history问题，下面的代码可以帮助你，一般不生成history是因为你采用了xxx as Router,这样的代码利用Router代理hashRouter这样没有将这个history给继承过来。以上是我基础配置react-router4.x问题。

 

import createHistory from 'history/createBrowserHistory';

const history = createHistory()