react路由与redux基本使用-一一网

什么是路由？

一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component

路由分类

1.前端路由

浏览器端路由，value是component，用于展示页面内容

注册路由: <Route path="/test" component={Test}>

工作过程：当浏览器的 path 变为 /test 时, 当前路由组件就会变为 Test 组件

2.后端路由

理解： value是function, 用来处理客户端提交的请求。

注册路由： router.get(path, function(req, res))

工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

3.react-router-dom

是react的一个插件库，专门用来实现一个SPA应用。

react路由基本使用

create-react-app脚手架搭的项目整体结构

下载react-router-dom: npm install --save react-router-dom

//About组件
import React, { Component } from 'react'
export default class About extends Component {
    render() {
        return (
            <h3>我是About的内容</h3>
        )
    }
}
复制代码

//Home组件
import React, { Component } from 'react'
export default class Home extends Component {
    render() {
        return (
            <h3>我是Home的内容</h3>
        )
    }
}
复制代码

//App组件
import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'    //引入所需路由相关组件
import About from './pages/About'   //路由组件
import Home from './pages/Home'     //路由组件
export default class App extends Component {
    render() {
        return (
            <div>
                <div className="page-header"><h2>React Router Demo</h2></div>
                <div className="list-group">
                    {/* 在React中靠路由链接实现切换组件--编写路由链接  导航区*/}
                    <Link to="/about">About</Link>
                    <Link to="/home">Home</Link>
                </div>
                <div className="panel-body">
                    {/* 注册路由  展示区*/}
                    <Route path="/about" component={About}/>
                    <Route path="/home" component={Home}/>
                </div>
            </div>
        }
    }
}

复制代码

//index.js文件
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'
ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)
复制代码

react-router-dom相关API

内置组件

<BrowserRouter>
<HashRouter>
<Route>
<Redirect>    //当所有路由都无法匹配时，跳转到Redirect指定的路由
<Link>
<NavLink>    //NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
<Switch>     //通常情况下，path和component是一一对应的关系,Switch可以提高路由匹配效率(单一匹配)
复制代码

<Switch>
    {/* 注册路由  展示区*/}
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    {/*  刚打开页面跳转到localhost:3000/about  */}
    <Redirect to="/about"/>
</Switch>
复制代码

BrowserRouter与HashRouter区别

1.底层原理不一样：

BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。

2.path表现形式不一样

BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test

3.刷新后对路由state参数的影响

BrowserRouter没有任何影响，因为state保存在history对象中。
HashRouter刷新后会导致路由state参数的丢失！！！

4.备注：HashRouter可以用于解决一些路径错误相关的问题。

嵌套路由

注册子路由时要写上父路由的path值，路由的匹配是按照注册路由的顺序进行的

export default class Home extends Component {
    render() {
        return (
            <div>
                <div>
                    <NavLink to="/home/news">News</NavLink>
                    <NavLink to="/home/messages">Messages</NavLink>
                </div>
                <div>
                   {/* 注册路由 */}
                    <Switch>
                        <Route path="/home/news" component={News}></Route>
                        <Route path="/home/messages" component={Messages}></Route>
                    </Switch>
                </div>
            </div>
        )
    }
}
复制代码

路由的严格匹配与模糊匹配

1.模糊匹配

默认使用，【输入的路径】必须包含要【匹配的路径】，且顺序要一致

2.严格匹配

<Route exact={true} path="/about" component={About}/>
复制代码

路由组件传参

params参数

路由链接(携带参数)：<Link to='/test/tom/18'}>详情</Link>

注册路由(声明接收)：<Route path="/test/:name/:age" component={Test}/>

接收参数：this.props.match.params

search参数

路由链接(携带参数)：<Link to='/test?name=tom&age=18'}>详情</Link>

注册路由(无需声明，正常注册即可)：<Route path="/test" component={Test}/>

接收参数：this.props.location.search

备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

state参数

路由链接(携带参数)：<Link to={{pathname:'/test',state:{name:'tom',age:18}}}>详情</Link>

注册路由：<Route path="/test" component={Test}/>

接收参数：this.props.location.state

编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退
        -this.prosp.history.push()
        -this.prosp.history.replace()
        -this.prosp.history.goBack()
        -this.prosp.history.goForward()
        -this.prosp.history.go()
复制代码