React学习笔记—路由初体验

React中的路由

一、路由的介绍与安装

1、什么是路由

路由是根据不同的 url 地址展示不同的内容或页面
一个针对React而设计的路由解决方案、可以友好的帮你解决 React components 到 *URL *之间的同步映射关系。

2、路由的安装

路由文档:https://reacttraining.com/react-router/web/guides/quick-start
路由安装:npm install react-router-dom


二、路由的使用

1、路由的两种模式:

hashRouter:路径带#号,不需要后端配置
BrowerRouter:路径不带#号,需要后端配置

2、路由的导入方法:

import {
    BrowserRouter as Router,  // 路由外层需要包裹的组件
    Route, // 每个路由组件都需要此组件
    Redirect, // 路由重定向
    Switch, // 匹配到第一个符合条件路径的组件,就停止匹配
    Link
} from 'react-router-dom'

3、在App.js中使用路由:

import React, { Component } from 'react';
import './App.css';
import BlogRouter from './router'

class App extends Component {
render() {
    return (
    <BlogRouter></BlogRouter>
    )
}
}

export default App;

4、定义路由的两种方式:

方法一(component):

import {
    BrowserRouter as Router,  // 路由外层需要包裹的组件
    Route, // 每个路由组件都需要此组件
    Redirect, // 路由重定向
    Switch, // 匹配到第一个符合条件路径的组件,就停止匹配
} from 'react-router-dom'

import React from 'react'
import Login from '../views/login/Login'

const BlogRouter = () => {
    return (
        <Router>
            <Switch>
                <Route path="/login" component={Login}></Route>
            </Switch>
        </Router>
    )
}
export default BlogRouter

方法二(render):

import {
    BrowserRouter as Router,  // 路由外层需要包裹的组件
    Route, // 每个路由组件都需要此组件
    Redirect, // 路由重定向
    Switch, // 匹配到第一个符合条件路径的组件,就停止匹配
} from 'react-router-dom'

import React from 'react'
import Login from '../views/login/Login'

const BlogRouter = () => {
    return (
        <Router>
            <Switch>
                <Route path="/login" render={() =>
                    <Login></Login>
                }></Route>
            </Switch>
        </Router>
    )
}
export default BlogRouter

5、路由的重定向(Redirect):

<Redirect from="/" to="/home" exact/>

6、定义路由需要注意:

exact: 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套 Switch 来用)
Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack这个警告只有在 hash 模式会出现。在 NavLink 加上 replace 来解决

7、嵌套路由:

import {
    BrowserRouter as Router,  // 路由外层需要包裹的组件
    Route, // 每个路由组件都需要此组件
    Redirect, // 路由重定向
    Switch, // 匹配到第一个符合条件路径的组件,就停止匹配
} from 'react-router-dom'

import React from 'react'
import Manage from '../rightmanage/Manage'
import Role from '../rightmanage/Role'
import Right from '../rightmanage/Right'

const BlogRouter = () => {
    return (
        <Router>
            <Switch>
                <Route path="/right-manage" render={() =>
                    <Manage>
                        <Switch>
                            <Route path="/right-manage/roles" component={Role}></Route>
                            <Route path="/right-manage/rights" component={Right}></Route>
                        </Switch>
                    </Manage>
                }></Route>
            </Switch>
        </Router>
    )
}
export default BlogRouter

8、路由的跳转方式:

声明式导航(NavLink):

编程式导航(this.props.history.push()):

适用场景:列表页跳转到详情页的时候,会根据文章的 id 来判断跳转的式哪篇文章,在文章页面可以使用 this.props.match.params.id 来接收传过来的文章 id

9、路由传参:

// 1
this.props.history.push({ pathname : '/user' ,query : { day: 'Friday'} })
this.props.location.query.day 
// 2
this.props.history.push({ pathname:'/user',state:{day : 'Friday' } }) this.props.location.state.day

10、路由拦截:

如果用户没有登录就跳转到登录页面,如果用户登陆了就跳转到首页

11、withRouter(干爹组件)的应用与原理

当一个组件没有被 Route 所包裹的时候,就不能使用 this.props.history

import { withRouter } from "react‐router"
withRouter(MyComponent)
withRouter(connect(...)(MyComponent))

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—路由初体验

文章字数:1.1k

本文作者:Spicy boy

发布时间:2020-04-26, 00:07:30

最后更新:2020-08-26, 13:06:20

原始链接:http://www.spicyboy.cn/2020/04/26/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E8%B7%AF%E7%94%B1%E5%88%9D%E4%BD%93%E9%AA%8C/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏