react 路由嵌套3.x版本

比眉伴天荒 2021-07-24 11:24 365阅读 0赞

路由嵌套
    	在一个路由中加载多个子路由
    
    	1、在主入口路由文件引入子路由
    	2、将子路由放入对应的父路由内,且子路由名称是在父路由名字基础上追加,否则跳转时会因跳转路径问题报错
    
    		<Router xx>>
    			<Router xx></Router>
    		</Router xx>
    	3、在父路由对应的组件内,添加Link标签设置跳转,别忘了引入Link
    
    	4、在父组件中添加
    		{this.props.children}
    		在哪里添加,子路由组件内容就显示在哪里
    	
    	5、若要在进入到父路由页面时就显示一个子路由组件的内容
    		将父路由标签内的指定路由标签换成<IndexRoute component={xx}></IndexRoute>
    
    			其中:(1)该标签不用写路径名,因此此时路径已变成父路由的路径
    				 (2)因此,还要修改父路由对应的组件内的对应的子路由的Link中的to属性值,修改为父路径+/或
    				 直接为父路径

代码示例:  
**主入口文件:**

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" 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'
    // import Links from './link'
    
    export default class Three extends Component{ 
    
    	render()
    	{ 
    		return(
    			<div>
    				
    				<li><Link to="/three/">3的子页面</Link></li>
    				<li><Link to="/three/thr">3的子页面2</Link></li>
    			第三页
    				{ this.props.children}
    
    			</div>
    		)
    	}
    }

**子路由文件:**

import React,{ Component} from "react"
    export default class Thre extends Component{ 
    
    	render()
    	{ 
    		return(
    			<div>
    				
    			第三页的子页面
    
    			</div>
    		)
    	}
    }