react-router4.0的使用

Posted 2020-12-02 evaling

近来很忙，学了一波react，特来记一笔，分享下react-router的使用方式

第一步引入内部组件

import {Route,BrowserRouter as Router,Switch,Link } from "react-router-dom"

1）配置路由文件，一个路由对应一个组件，平级路由

import SelfHeader from ‘./components/pc/selfHeder‘
import ModuleParts from ‘./components/pc/modulePart‘
import PCAddModule from ‘./components/pc/addModules‘
import detail from ‘./components/pc/detail‘
class App extends Component {
  render() {
    return (
      <div className="App">
        {/* pc */}
          <SelfHeader/>

　　　　　　 <Link to=‘/‘ className="clearfix">addModule</Link>

　　　　　　 <Link to=‘/addModule‘ className="clearfix">addModule</Link>

          <Router>
            <Switch >
              <Route exact path="/" component={ModuleParts}></Route>
              <Route path="/addModule" component={PCAddModule}></Route>
              {/*
              <Route path="/usercenter" component={PCUserCenter}></Route> */}
            </Switch >
          </Router>
      </div>
    );
  }
}
export default App;

可以看到Link就是路由触发标签，相当于angularJS的ui-sref，vue中的route-link，在react中我们可以把Route组件当作是一个容器，对应装载入组件，类似于angularJS的ui-view(ui-router)，vue中的route-view

2）路由的嵌套

经常遇到的情况是需要使用到路由嵌套，就是父子级路由

在angularJS（mvc）中我们会使用多个views,例如：

define([‘app‘], function (myapp) {
    myapp.config([‘$stateProvider‘, ‘$urlRouterProvider‘,
        function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state(‘editor‘, {
                url: ‘/editor‘,
                //templateUrl: ‘html/login.html‘,
                //constroller: ‘loginCtrl‘,
                //resolve: {
                //    deps: $requireProvider.requireJS([‘js/ctrls/login.js‘])
                //}
                views: {
                    "main": {
                        templateUrl: ‘html/editor.html‘,
                        controller: ‘editorCtrl‘,
                    }
                }
            });
        }
    ]);

})

 

在vue2.0中这样的，不要忘记在父级组件中加上一个<router-view/>

{
    path: ‘/v_next_tick‘, 
    name: ‘v_next_tick‘,
    component: VNextTick,
    children:[
      { path: ‘/aaa‘, 
      name: ‘aa‘,
      component: aa,}
    ],
    meta:{
      tabNum: 0
    }

 

在react中，下面的addModules组件承接就是上面例子中的addModules组件

class addModules extends Component {
    constructor(props){
        super(props)
        this.state= {
            a:33
        }
    };
    render () {
        return (
            <div className="add-module-wrapper">
　　　　　　　　　 <Link to={`${this.props.match.url}/ee/22`} className="clearfix">detailBtn</Link>
                <Route exact path={`${this.props.match.url}`} component={detail}></Route>
                <Route path={`${this.props.match.url}/ee/:id`} component={detail}></Route>
                <Link to=‘/‘ className="clearfix">addModule</Link> {/*返回顶级默认路由对应页面*/}
            </div>
        )
    } 
}
export default addModules;

　　

a）需要补充说明的是在react中子级路由是随父级组件一起配置的