美文网首页
react-router-dom 的基本使用

react-router-dom 的基本使用

作者: 不行了快拦住我 | 来源:发表于2020-08-13 11:15 被阅读0次

一、基本使用
安装 路由

$ 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>

相关文章

网友评论

      本文标题:react-router-dom 的基本使用

      本文链接:https://www.haomeiwen.com/subject/tzdbdktx.html