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