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(
        
          <div>

           <Router history={hashHistory}>
                  
                  <Route path="/" component={Hello}/>
                  <Route path='/news' component={News}/>
                  <Route  path='/son' component={Son}/>
            </Router>
          </div>
    )
  }
}

ReactDOM.render((<Index/>),document.getElementById("root"))
ReactDOM.render((<Index/>),document.getElementById("root"))

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

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

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

具体见代码：

路由文件
<Router history={hashHistory}>
                    
                  <Route path="/" component={Hello}> 
                        <IndexRoute component={Hello}/>
                  </Route>
                     <Route path='news/:num/:id' component={News}/>
                     <Route  path='son' component={Son}/> 
                     <Route path='home' component={Home}/>  
            </Router>

扫描二维码关注公众号，回复： 3562312 查看本文章

点击页面；
<div>
      		   <Link to={`/news/0/${this.state.id}`}>新来的</Link>
      		   <br/>
      		   <Link to='news/1/我的未来'>不是新来的</Link>
      		   <br/>
      		   <Link to='news/2/爱的味道'>你觉得呢</Link>
      		</div>

跳转到的页面
<div className="hello">
	        我是bushi新来的！
	        	{
	        		//this.props.params.
	        	}
	        	{this.props.params.num}
	        	{this.props.params.id}
      </div>

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

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

                   <Route path="/" component={Hello}> 
                        <Route  path='son' component={Son}/> 
                        <Route path='home' component={Home}/>
                   </Route>

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

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

默认路由：

  <Router history={hashHistory}>
                    
                  <Route path="/" component={Hello}> 
                  
                        <IndexRoute component={Son}/>
                       
                        <Route path='home' component={Home}/>

                        <Route path='now' component={Now}/>
                  </Route>
                     <Route path='news/:num/:id' component={News}/>
                       
            </Router>

组件外部跳转：

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

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

注意几点：加载引包import

import {HashRouter as Router,Route} from 'react-router-dom';

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

div>
          	<Router>
                <div>
				    <Route  path="/" component={Hello}>
				    </Route>
					<Route path='/news' component={News}/>
					<Route path="/son" component={Son}/>
                </div>
            </Router>

中途包裹一个div,这是react中加载机制，为了避免过多dom节点,在这里给大家安利另外一个小东东，React.Fragment

就行它，它在解析过程，不生成节点。这也就它的一个优势。

路由跳转页：

<div >
      		    <ul>
               
                <li><Link to="/news">news</Link></li>
                <li><Link to="/son">son</Link></li>
            </ul>
      		</div>

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

上面的方法是可以实现二级路由跳转，接下来介绍如何实现单级路由跳转。废话不多说，看代码：

<React.Fragment> 
        <Route exact path="/" component={Login}/>
        <Route strict path="/index"  component={Index}/>
	<Route  path='/index/mine' component={Mine} />
	<Route  path='/index/main' component={Main} />
	<Route  path='/detail' component={Detail} />
</React.Fragment>

接下来，我就为大家讲解这两段代码，React.Fragment可以包裹一个react代码，解析后不产生dom节点的一个元素。

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(
      <div className="hello">
         组件传递问题！ 
          	{this.state.match.params.id}
      </div>

在4.x中，如路由的动态跳转又称为一个问题，需要去配置，那就是history,在3.x好像不太需要配置，直接引入就能生成。4.x需要简单的配置一下进行完成。

首先必须的引入一下：

import createHistory from 'history/createBrowserHistory';

const history = createHistory()

  <Router  history={history}>
         <RouterIndex />
  </Router>

以上是我完成4.x以及路由配置。

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

猜你喜欢