react-router4.0的使用

Posted evaling

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-router4.0的使用相关的知识,希望对你有一定的参考价值。

近来很忙,学了一波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中子级路由是随父级组件一起配置的


以上是关于react-router4.0的使用的主要内容,如果未能解决你的问题,请参考以下文章

React-router 4.0 history报错

react-router4.0的使用

react-router@4.0 使用和源码解析

react-router 4.0 升级攻略

react-router 4.0 学习笔记

React-Router 介绍及使用