码迷,mamicode.com
首页 > 其他好文 > 详细

React-Router

时间:2020-12-28 11:30:29      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ctr   需要   end   引入   地址   tor   conf   核心   default   

React-Router

最新的路由的版本是5.2的版本。里面的话提供了一些包

所在在做web端开发的时候只需要安装react-router-dom就可以了,因为内部已经包含了最核心的内容了。

react-router | react-router-native | react-router-config

路由的简单使用

? 安装路由: yarn add react-router-dom

? 需要在最外层的节点上面:(hash vs history)

index.js

import {HashRouter as Router} from "react-router-dom"
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById(‘root‘)
);

? 使用Route实现路由

App.js

import React,{Component} from ‘react‘;
import {Route,Redirect,Switch} from "react-router-dom"
import Home from "./views/Home"
import Article from "./views/Article"
import NotFound from "./views/NotFound"
//Route指代路由对象,path匹配路径,component代表路由组件  exact就是将地址栏与path必须完全一致
//Redirect重定向 to跳到指明的路径
//Switch 内部的路由只要匹配一个就结束了,下面的就不匹配了
class App extends Component{
  render(){
    return (
      <Switch>
        <Route path="/home" component={Home}/>
        <Route path="/article" component={Article}/>
        <Route path="/404" component={NotFound}/>
        <Redirect to="/home" from="/" exact/>   
        <Redirect to="/404"/>
      </Switch>
    )
  }
}
export default App;

声明式导航 (vue中router-link实现的)

可以通过NavLink实现a标签的切换效果,渲染成a标签,并且带有active的class样式

App.js

import {Route,Redirect,Switch,NavLink as Link} from "react-router-dom"

<Link to="/home" activeStyle={{color:‘red‘}}>首页</Link>
<Link to="/article" activeStyle={{color:‘red‘}}>文章</Link> 

二级路由与动态跳转

二级路由:

Article文件:

import React, { Component } from ‘react‘
import {Route,NavLink as Link} from "react-router-dom"
import ArticleDetail from ‘./ArticleDetail‘;
export default class Article extends Component {
    render() {
        return (
            <div>
                <Link to="/article/1">文章一</Link>
                <Link to="/article/2">文章二</Link>
                <Route path="/article/:id" component={ArticleDetail}/>
            </div>
        )
    }
}

ArticleDetail中获取动态参数?

因为ArticleDetail被Route进行包裹,就是路由组件了。它的属性上面就会有路由相关的api

ArticleDetail.js

import React, { Component } from ‘react‘
export default class ArticleDetail extends Component {
    render() {
        //history/location/match的路由api了。
        return (
            <div>
                文章详情 -- {this.props.match.params.id}
            </div>
        )
    }
}

路由常用的api方法

Route中的render函数

? 一旦通过Route组件的component属性指明的组件,那么这个路由组件上面就会有路由相关的api

? (location / history / match)

? 如果必须要传入额外属性的话,单纯使用component是解决不了的。

<Route path="/home" render={(routeProps)=>{
	return this.state.isLogin ? <Home {...routeProps} a={1}/> : "未登录"
}}/>

link的参数传递

? 1.可以通过动态路由的方式进行参数传递

? path="/article/:id"

? Detail组件内部可以通过 this.props.match.params.id可以获取到动态参数

? 2.可以通过query进行传参

? path="/article?title=文章一"

? Detail组件内部可以通过 this.props.location.search可以获取到 “?title=文章一”

? 3.可以通过state进行隐式传参

? to={{pathname:‘/article/2‘,state:{title:‘文章2‘}}}

? Detail组件内部可以通过 this.props.location.state.title可以获取到

withRouter

我们可以通过引入高阶组件withRouter,将普通组件进行包裹,那么BackHome就变成了伪路由组件,它本身不能实现跳转,但是仍然可以通过属性去访问到路由相关的api了。

import React, { Component } from ‘react‘
import {withRouter} from "react-router-dom"z
// 如果封装BackHome组件调用的话,他上面是没有this.props.history属性的
// 但是通过HOC withRouter包裹之后,这个BackHome就变成了一个伪路由组件,
// 本身是不会跳转进来,只不过属性上面却有了路由相关的api。
@withRouter
class BackHome extends Component {
    back = ()=>{
        //通过编程式导航方式返回首页
        this.props.history.push("/home")
    }

    render() {
        return (
            <div>
                <button onClick={this.back}>返回home</button>
            </div>
        )
    }
}
export default BackHome

React-Router

标签:ctr   需要   end   引入   地址   tor   conf   核心   default   

原文地址:https://www.cnblogs.com/cupid10/p/14171596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!