一、基本使用
安装 路由
$ npm i react-router-dom --save --registry=https://registry.npm.taobao.org
编写简单应用示例
import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'
function A() {
return (
<div>我是 A 组件</div>
)
}
function B() {
return (
<div> 我是 B 组件</div>
)
}
export default function R() {
return (
<Router>
<ul>
<li><Link to="/a">A 组件</Link></li>
<li><Link to="/b">B 组件</Link></li>
<li><Link to="/e">E 组件</Link></li>
</ul>
<Route>
<Switch>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
<Route path="/" component={A} />
</Switch>
</Route>
</Router>
)
}
在 App.js 中导入路由
import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router.js' // 路由文件
ReactDOM.render(<Router />, document.getElementById('root'))
代码解析：
路由分为两种 BrowserRouter 和 HashRouter。两种用法类似，表现形式上有一定差异。
<Switch> 路由中的Switch 代表只匹配一个路由，如果不使用 <Switch> 嵌套，路由会多次匹配
<Link> 标签，类似于 <a> 标签(最终也会被渲染为 a 标签)。to 属性即可理解为 a 标签的 href属性
<Route> 的 path 表示属性匹配路径
<Route> 的 component 表示路径匹配成功后渲染的组件
二、路由传值
在 react 中 有两种方式进行路由传值
通过 原始的 GET 路径后面，添加 ?key=value 的方式
在 组件内部 使用 this.props.location.search的方式获取键值对(只不过获取过后还是一个字符串，需要进一步的解析)
通过动态路由传值(占位符)。类似于/a/:id/:value
在组件内部 使用 this.props.match.params.xxxx 来获取。
三、子路由的嵌套
这种情况很常见，比如 A 组件内部。还有许多其他的子组件。需要路由匹配选择对应的子组件时，就需要使用路由嵌套
这里接收 <Route> 标签中的另一个属性 render
示例
import React from 'react'
import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom'
function A(props) {
return (
<div>
我是 A 组件
<ul>
<li><Link to="/a/com1">A com1</Link></li>
<li><Link to="/a/com2">A com2</Link></li>
<li><Link to="/a/com3">A com3</Link></li>
</ul>
{props.children}
</div>
)
}
function B(props) {
return (
<div>
我是 B 组件
<ul>
<li><Link to="/b/com1">B com1</Link></li>
<li><Link to="/b/com2">B com2</Link></li>
<li><Link to="/b/com3">B com3</Link></li>
</ul>
{props.children}
</div>
)
}
function ACom1() {
return (
<div>
A Com1 组件
</div>
)
}
// .. ACom2
// .. ACom3
function BCom1() {
return (
<div>
B Com1 组件
</div>
)
}
// ...BCom1
// ...Bcom3
export default function() {
return (
<Router>
<Switch>
<Route path="/a" render={() => (
<A>
<Switch>
<Route path="/a/com1" component={ACom1}/>
<Route path="/a/com2" component={ACom2}/>
<Route path="/a/com3" component={ACom3}/>
</Switch>
</A>
)}/>
<Route path="/b" render={() => (
<B>
<Switch>
<Route path="/b/com1" component={BCom1}/>
<Route path="/b/com2" component={BCom2}/>
<Route path="/b/com3" component={BCom3}/>
</Switch>
</B>
)}/>
</Switch>
</Router>
)
}
{this.props.children} 表示子组件渲染的位置
需要特别注意的是：component属性 和 render属性 不能同时出现在一个 <Route> 标记中
react-router-dom 实现路由跳转
image
yangdongnan 2019-06-10 11:36:10
image
3428
image
收藏 2
分类专栏： react
版权
<article class="baidu_pl" style="box-sizing: inherit; outline: 0px; display: block; position: relative; padding-top: 16px; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
简单的写了一个移动呈现，底部tabbar跳转的demo
简述
demo 使用 create-react-app 直接创建
路由是使用 react-router-dom
目录结构
稍微改变一下 create-react-app 创建后的src目录， 这里目录和vue相似
在这里插入图片描述
index.js 中不做改变
App.js
App.js 中 使用 react-router-dom 检测地址 检索 ‘/’ , ‘/views’ 两个路由
import React from 'react';
import { HashRouter, Route, Redirect} from "react-router-dom";
import './assets/css/App.less';
import Views from './views/Views'
function App() {
return (
<div className="App">
<HashRouter>
<Route path='/' render={()=>(<Redirect to='/views' />)}></Route>
<Route path='/views' component={Views}></Route>
</HashRouter>
</div>
);
}
export default App;
Views.js
Views.js 是业务的容器，这个页面实现tabbar的包裹与跳转
react-router-dom 函数式跳转直接使用 this.props.history.push({ })
参数参考 https://reacttraining.com/react-router/web/api/history
import React, { Component, Fragment } from "react";
import { Route, Redirect } from 'react-router-dom'
class Views extends Component {
constructor ( props ) {
super(props)
this.state = {}
}
render () {
return (
<Fragment>
<div className="views">
<div className="views-container">
<Route path="/views" render={()=> <Redirect replace to='/views/home' />}></Route>
<Route path="/views/home" component={require('./page/Home').default}></Route>
<Route path="/views/category" component={require('./page/Category').default}></Route>
<Route path="/views/fn" component={require('./page/Fn').default}></Route>
<Route path="/views/cart" component={require('./page/Cart').default}></Route>
<Route path="/views/me" component={require('./page/Me').default}></Route>
</div>
<footer className="footerFixed">
<button id={'home'} onClick={this.tabbClick}>首页</button>
<button id={'category'} onClick={this.tabbClick}>分类</button>
<button id={'fn'} onClick={this.tabbClick}>fn</button>
<button id={'cart'} onClick={this.tabbClick}>购物车</button>
<button id={'me'} onClick={this.tabbClick}>我的</button>
</footer>
</div>
</Fragment>
)
}
tabbClick = ( e ) => {
e.preventDefault()
switch ( e.target.id ) {
case 'home' :
this.props.history.push({
pathname: '/views/home'
});
break;
case 'category' :
this.props.history.push({
pathname: '/views/category'
});
break;
case 'fn' :
this.props.history.push({
pathname: '/views/fn'
});
break;
case 'cart' :
this.props.history.push({
pathname: '/views/cart'
});
break;
case 'me' :
this.props.history.push({
pathname: '/views/me'
});
break;
default: {
this.props.history.push({
pathname: '/views/home'
})
}
}
}
}
export default Views
demo
在这里插入图片描述
</article>
网友评论