React路由 路由传参 路由上下文 组件跳转

官方网站

一、简介

路由最基本的职责就是当页面的访问地址与Route上的 path匹配时,就渲染出对应的 UI 界面(组件)。 实现SPA应用,页面切换不会刷新页面,内容局部更新。同时路由也可以带货(传参)。

二、react-router提供了两种路由模块

1.React-Router

提供了一些router的核心API,包括Router, Route, Switch等,但是它没有提供 DOM 操作进行跳转的API。

2.React-Router-DOM*

提供了 BrowserRouter,HashRouter , Route, Link等 API,我们可以通过 DOM 的事件控制路由,例如点击一个按钮进行跳转。

所以在开发过程中,我们更多是使用React-Router-DOM

三、路由的两种模式

1.HashRouter

url中会有个#,例如localhost:3000/#,HashRouter就会出现这种情况,它是通过hash值来对路由进行控制。如果使用HashRouter,地址栏就会默认有这个#。

2.BrowserRouter*

如果不需要这个#,需要优雅的跳转,这时就使用BrowserRouter。

在开发过程中整个SPA项目中,只能存在一个BrowserRouter或者HashRouter标签,否则React在进行路由时就不能正常渲染,需要刷新才能渲染。(这不就与SPA背道而驰…)

四、路由跳转

1.声明式导航

a.Link组件
//1.直接在to属性后写要去的地址
<Link to="/About">去About页面</Link>
<Link to={pathname:'/About'}>去About页面</Link>

Link组件主要属性是to,to可以接受string或者一个object(如果是object要写成对象的形式,键名为pathname),来控制url。

b.NavLink组件
<NavLink to="/About" activeClassName="red">去About</NavLink>
<NavLink to={pathname:'/about'} activeClassName="red">去About</NavLink>

NavLink组件可以为当前选中的路由设置激活时的类名(activeClassName)、样式(activeStyle);以及回调函数等。

2.编程式导航

this.props.history.push({pathname:'/about'})

如果页面不是跳转过来的,或者不是有状态组件,直接使用编程式导航会存在不能跳转的问题。

五、路由的配置

1.Route组件

Route组件用来表示路径和组件的对应关系,当访问地址与Route中的path对应时,就在它的位置渲染出对应的组件。

<BrowserRouter>
    //此处BrowserRouter只是例子,实际项目中直接把它放到根文件中
   <Route path="/" component={App}/>  
   <Route path="/About" component={About}/>  
</BrowserRouter>

在SPA项目中,只能存在一个BrowserRouter标签,因此一般这个BrowserRouter标签或HashRouter会写在根文件即index.js下包裹住所有组件。

六、基本使用步骤

1.下载路由模块

npm install --save react-router-dom

2.在跳转处设置

a.声明式
//开始先引入模块
import { Link, NavLink } from "react-router-dom";

//有状态组件的render函数中,或无状态组件的return中设置Link或NavLink组件
<Link to="/User">User组件</Link>
<NavLink to="/Goods">Goods组件</NavLink>
//这里to属性的值是自定义的,只要与显示处Route的to属性值匹配即可

如果把link标签写成a标签,那么页面会有闪动,因为浏览器会识别为这是一次请求,刷新页面。而l点击ink标签时,url会更新,组件也会被重新渲染,但页面不会刷新。

b.编程式
import React from "react";

export default class User extends React.Component {
    constructor(props) {
        super(props)
    }

    go() {
        this.props.history.push({ pathname: '/Goods' })
    }

    render() {
        return (
            <div>
                这里是User组件
                <input type="button" value="走你,去Goods" onClick={() => this.go()} />
            </div>
        );
    }
}

3.在展示处设置

//根文件 index.js
//因为整个项目中只能使用一个BrowserRouter或HashRouter组件,因此直接把它放在根组件之中
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
//开始先引入模块
import { BrowserRouter, Route } from "react-router-dom";

//有状态组件的render函数中,或无状态组件的return中设置BrowserRouter或HashRouter组件
    <Route path="/" component={App}/>  
    <Route path="/Goods" component={Goods}/>  
    <Route path="/User" component={User}/>  

七、二级路由

直接在父组件里写即可,子组件不用做任何更改

import React from "react";
import { Route, Link } from "react-router-dom";
import User_son1 from "../components/User_son1"
import User_son2 from "../components/User_son2"


export default class User extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                这里是User组件<br />
                {/* Link组件的to属性一定带上父一级路由的路径即可 */}
                <Link to="/User/User_son1">显示User_son1</Link> | <Link to="/User/User_son2">显示User_son2</Link>
                <hr />
                {/* 显示子组件时,也要加上父组件的路径 */}
                <Route path="/User/User_son1" component={User_son1}></Route>
                <Route path="/User/User_son2" component={User_son2}></Route>
            </div>
        );
    }
}

八、路由传参

1.params

传出值的组件
import React from "react";
import { Route, Link, NavLink } from "react-router-dom";
import UserDetil from "../components/UserDetil"

export default class User extends React.Component {
    constructor(props) {
        super(props)
    }

    goparams() {
        this.props.history.push('/User/UserDetil/' + '003')
    }

    render() {
        return (
            <div>
                这里是User组件,路由跳转params带货<br />
                {/* 点击的位置,此处配置路由跳转,传值 */}
                <Link to="/User/UserDetil/001">显示User1的详情</Link> |
                <NavLink to={"/User/UserDetil/002"}>显示User2的详情</NavLink> |
                <input type="button" value="显示User3的详情" onClick={() => this.goparams()} />
                <hr />
                {/* 展示的位置,此处配置路由传值的变量名 */}
                <Route path="/User/UserDetil/:userid" component={UserDetil}></Route>
            </div>
        );
    }
}
接收值的组件
import React from "react";

export default class UserDetil extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                这里是UserDetil组件<br />
                {/* 获取值通过this.props.match.params.变量名 获取,函数式组件没有this,在定义函数的形参中声明props即可获取props */}
                <p>用户id{this.props.match.params.userid}</p>
            </div>
        );
    }
}

优点:刷新页面,参数依然存在;很好理解…地址栏的地址并没有变。

缺点:只能传字符串,而且如果传的值太多的话,url会变得很长。

2.query

传出的组件
import React from "react";
import { Route, Link, NavLink } from "react-router-dom";
import UserDetil from "../components/UserDetil"

export default class User extends React.Component {
    constructor(props) {
        super(props)
    }

    goquery() {
        this.props.history.push({ pathname: "/User/UserDetil", query: { userid: "01003" } })
    }

    render() {
        return (
            <div>
                这里是User组件,路由跳转query带货<br />
                {/* 点击的位置,此处配置就必须写成对象,跳转地址pathname,传值query{变量名:变量值} */}
                {/* 注:两层{{}},第一层{}表示js代码,第二层{}表示这东西是个对象 */}
                <Link to={{ pathname: "/User/UserDetil", query: { userid: "01001" } }}>显示User1的详情</Link> |
                <NavLink to={{ pathname: "/User/UserDetil", query: { userid: "01002" } }}>显示User2的详情</NavLink> |

                <input type="button" value="显示User3的详情" onClick={() => this.goquery()} />
                <hr />
                {/* 展示的位置,此处路由配置不用变 */}
                <Route path="/User/UserDetil" component={UserDetil}></Route>
            </div>
        );
    }
}
传入的组件
import React from "react";

export default class UserDetil extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                这里是UserDetil组件,接收query带货<br />
                <p>用户id{this.props.location.query.userid}</p>
            </div>
        );
    }
}

优点:传参优雅,地址栏不会添加任何东西;传递参数可以传对象。

缺点:一旦页面刷新,参数就会丢失。

3.state*

传出的组件
import React from "react";
import { Route, Link, NavLink } from "react-router-dom";
import UserDetil from "../components/UserDetil"

export default class User extends React.Component {
    constructor(props) {
        super(props)
    }

    gostate() {
        this.props.history.push({ pathname: "/User/UserDetil", state: { userid: "01003" } })
    }

    render() {
        return (
            <div>
                这里是User组件,路由跳转state带货<br />
                {/* 点击的位置,此处配置就必须写成对象,跳转地址pathname,传值query{变量名:变量值} */}
                {/* 注:两层{{}},第一层{}表示js代码,第二层{}表示这东西是个对象 */}
                <Link to={{ pathname: "/User/UserDetil", state: { userid: "01001" } }}>显示User1的详情</Link> |
                <NavLink to={{ pathname: "/User/UserDetil", state: { userid: "01002" } }}>显示User2的详情</NavLink> |
                <input type="button" value="显示User3的详情" onClick={() => this.gostate()} />
                <hr />
                {/* 展示的位置,此处路由配置不用变 */}
                <Route path="/User/UserDetil" component={UserDetil}></Route>
            </div>
        );
    }
}
传入的组件
import React from "react";

export default class UserDetil extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                这里是UserDetil组件,接收state带货<br />
                <p>用户id{this.props.location.state.userid}</p>
            </div>
        );
    }
}

同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,与query相比,只需要把query改为state即可。

优点:传参优雅,地址栏不会添加任何东西;传递参数可以传对象。

缺点:页面刷新,HashRoute方式会丢失参数,BrowserRouter模式不会丢失参数。

4.seach

传出的组件

import React from "react";
import { Route, Link, NavLink } from "react-router-dom";
import UserDetil from "../components/UserDetil"

export default class User extends React.Component {
    constructor(props) {
        super(props)
    }

    gosearch() {
        this.props.history.push({pathname:'/Inbox',search:'?a=1&b=2'})
    }
    
    render() {
        return (
            <div>
                <Link to='/Inbox?a=1&b=2' >显示User1的详情</Link> |
                <NavLink to='/Inbox?a=1&b=2' >显示User2的详情</NavLink> |
                <input type="button" value="显示User3的详情" onClick={() => this.gosearch()} />
                <hr />
                {/* 展示的位置,此处路由配置不用变 */}
                <Route path="/User/UserDetil" component={UserDetil}></Route>
            </div>
        );
    }
}

取值

this.props.location.search

用location.search所获取的是查询字符串,即获取到的是传来的一长串字符串(例:?a=1&b=2)所以,需要使用search方法时需要自行解析字符串,也可以使用第三方模块:qs,或者nodejs里的query-string。

九、路由上下文

在react-router里面,如果组件是通过路由跳转的,那么它会把路由相关的API挂在了组件的props上,并且分为history,location,match。

history:历史,用来跳转的,并做历史记录。有函数:push(),replace(),go() …………

location:地址,地址栏上路径,并保存着query,state,search等数据。

match:匹配,匹配到的路径,有params

//使用state的跳转方式打印一下props
import React from "react";

export default class UserDetil extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        console.log(this.props);
    }

    render() {
        return (
            <div>
                这里是UserDetil组件,接收state带货<br />
                <p>用户id{this.props.location.state.userid}</p>
            </div>
        );
    }
}
//打印结果
props: {
    { history: {}, location: {}, match: {}, staticContext: undefined }
    
    history:
    action: "PUSH"
    block: ƒ block(prompt)
    createHref: ƒ createHref(location)
    go: ƒ go(n)
    goBack: ƒ goBack()
    goForward: ƒ goForward()
    length: 50
    listen: ƒ listen(listener)

    location: { pathname: "/User/UserDetil", state: {}, search: "", hash: "", key: "h00797" }
    push: ƒ push(path, state)
    replace: ƒ replace(path, state)
    __proto__: Object
    location:
    hash: ""
    key: "h00797"
    pathname: "/User/UserDetil"

    search: ""
    state: { userid: "01001" }
    __proto__: Object

    match:
    isExact: true
    params: { }
    path: "/User/UserDetil"
    url: "/User/UserDetil"
    __proto__: Object
    staticContext: undefined
    __proto__: Object
}
//确实history,location,match三个属性被挂到了props上;示例中是用stste跳转的,所以只有location中有信息。

十、非路由跳转的组件获取上下文

在页面上展示组件有两种方式,一种是通过路由跳转,一种是使用标签名直接展示。

a)使用路由跳转的方式:就算这个组件没有属性,通过路由时,props都会自动增加属性:history,match,location。

b)使用标签名直接展示时:因为没有属性,所以组件的props是空。

如果使用标签名展示组件的方式,还想获取到路由上下文,有以下解决方案:

1.通过属性传递

<Son {...this.props} />

首先要求,当前父组件是路由跳转过来的(起码得保证他爸有,儿子才具有世袭的可能性),然后把路由上下文通过属性的方式传递给子组件。

2.通过withRouter包装(高阶组件)

import {withRouter} from 'react-router-dom'

class 组件 extends Component{
    
}

export default withRouter(组件)

withRouter是react-router-dom提供的一个高阶函数,引入解构后就可以使用,通过这个高阶函数,就可以给组件添加上下文,导出时通过withRouter这个高阶函数即可。

使用时正常使用组件,不受任何影响。

十一、Route组件里的各种属性

首先说明:react的路由匹配默认是模糊的,包容的。

1.exact严格匹配

    {/* 如果没有exact={true}这个属性,页面会展示两个Goods组件,因为"/Goods"路径也符合"/" */}
    <Route exact={true} path="/" component={Goods} />
    <Route path="/Goods" component={Goods} />
    <Route path="/User" component={User} />

exact={true} 表示地址栏的路径和提供的地址必须相等,一模一样,才会被匹配。

2.Switch排他性匹配

<Switch>
    {/* 有Switch之后如果没有exact={true}这个属性,那么所有的路径都指向/,并且不能匹配后面的 */}
    <Route exact={true} path="/" component={Goods} />
    <Route path="/Goods" component={Goods} />
    <Route path="/User" component={User} />
</Switch>

React路由匹配到的多个路由对应的所有组件会同时被显示在页面上。如果只希望显示匹配到的第一个组件(换句话说:匹配到的第一个符合要求的路径后,其它路径就不再做匹配),那么使用switch。使用时,Switch组件包裹住所有Route组件。

3.404

<Route component={Error}/> 

在路由配置里不设置path属性,那么,就总是会匹配上。404页面就需要这样做(当然还得结合Switch)

4.Redirect重定向

<Redirect exact={true} from="/" to="/Home" />

如果匹配到from中的路径,那就给你重定向到to的路径去。使用时一定要加exact={true},否则轻易一匹配,所有路径都会被重定向。

详解

1.组件及其作用

组件 作用
路由模式 BrowserRouter 约定模式 为 history,使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步
路由模式 HashRouter 约定模式 为 hash,使用 URL 的 hash 来保持 UI 和URL 的同步
声明式跳转 NavLink 声明式跳转 还可以约定 路由激活状态
声明式跳转 Link 声明式跳转 无激活状态
重定向 Redirect 重定向 ~~ replace
匹配并展示 Route 匹配组件,并展示组件。即匹配成功后,组件立即被替换成匹配的组件
排他性匹配 Switch 排他性匹配。如果不想使用包容性,那么使用Switch。
高阶组件 withRouter 把不是通过路由切换过来的组件中,将 history、location、match 三个对象传入props对象上(高阶组件)

2.结构

BrowserRouter|HashRouter

App(或其它组件)

  • NavLink|Link
  • Route
  • Redirect
    • 子组件
      • NavLink|Link
      • Route

3.BrowserRouter

属性 类型 作用
basename string 所有位置的基本URL。如果您的应用是从服务器上的子目录提供的,则需要将其设置为子目录。格式正确的基本名称应以斜杠开头,但不能以斜杠结尾
getUserConfirmation Function 用于确认导航的功能。默认使用window.confirm

4.Route

属性 类型 作用
path string |object 路由匹配路径。没有path属性的Route 总是会 匹配
exact boolean 为true时,要求全路径匹配(/home)。路由默认为“包含”的(/和/home都匹配),这意味着多个 Route 可以同时进行匹配和渲染
component Function |component 在地址匹配的时候React的组件才会被渲染,route props也会随着一起被渲染
render Function 内联渲染和包装组件,要求要返回目标组件的调用

5.Link

属性 类型 作用
to string | 对象{pathname:,search:,hash:} 要跳转的路径或地址
replace boolean 是否替换历史记录

6.NavLink

属性 类型 作用
to string|对象{pathname:,search:,hash:} 要跳转的路径或地址
replace boolean 是否替换历史记录
activeClassName string 当元素被选中时,设置选中样式,默认值为 active
activeStyle object 当元素被选中时,设置选中样式

7.Switch

该组件用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配(场景:侧边栏,引导选项卡等)

属性 类型 作用
location string object
children node

8.Redirect

该组件用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配(场景:侧边栏和面包屑,引导选项卡等

属性 类型 作用
from string 来自
to string object 去向
push boolean 添加历史记录
exact boolean 严格匹配
sensitive boolean 区分大小写

能看到这里同样辛苦的是你。。。也不枉我24k纯人手。

你可能感兴趣的:(React,react,reactjs)