React-router学习笔记

react-router的理解

1.react的一个插件库
2.专门用来实现SPA应用

react-router相关API

内置组件

BrowserRouter

使用 HTML5 历史 API 记录（ pushState，replaceState 和 popstate 事件）的 使的UI与URL保持同步。

Route

Route 组件也许是 React Router 中最重要的组件，它可以让你理解并学习如何使用它。它最基本的职责是在 location 与 Route 的 path 匹配时呈现一些 UI。

Link

在应用程序周围提供声明式的,可访问的导航。

NavLink

1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2.标签体内容是一个特殊的标签属性
3通过this.props.children可以获取标签体内容

Switch

Switch的使用
1.通常情况下,path和component是一一对应的关系，
2Switch可以提高路由匹配效率（单一匹配）

 <Switch>              
	 <Route path={'/about'} component={About}></Route>
	 <Route path={'/hello'} component={Hello}></Route>
 </Switch>

redirect

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

其他

history对象
match对象
withRouter函数

路由的基本使用

index.js

import React from 'react';//创建组件、虚拟DOM元素，生命周期
import ReactDOM from 'react-dom';//把创建好的 组件和虚拟DOM放在页面上展示的。
import App from "./App";
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
        <App></App>
    </BrowserRouter>,
    document.getElementById('root')
);

app.js

import React from 'react';//创建组件、虚拟DOM元素，生命周期
import {Link,Route} from 'react-router-dom'
import {About} from "./components/about";
import {Hello} from "./components/hello";
export default class App extends React.Component{
    render() {
        return (
            <div>
                <div>
                    <Link to={'/about'}>去关于页面</Link>
                    <Link to={'/hello'}>去你好页面</Link>
                </div>
                <div>
                    <Route path={'/about'} component={About}>

                    </Route>
                    <Route path={'/hello'} component={Hello}>

                    </Route>
                </div>
            </div>
        )
    }
}

注意
1.明确好界面中的导航区、展示区
2.导航区a标签为Link标签
3.展示区写Route标签进行路径匹配
4App的最外包裹一个<BrowserRouter><BrowserRouter/>

嵌套路由

hello/index页面

// @flow
import * as React from 'react';
import {Link,Route,Redirect} from 'react-router-dom'
import {Messges} from "./childrenComponents/messges";
import {News} from "./childrenComponents/news";

export class Hello extends React.Component{
    render() {
        return (
            <div>
                Hello页面
                <div>
                    <Link to={'/hello/messge'}>消息页面</Link>
                </div>
                <div>
                    <Link to={'/hello/news'}>新闻页面</Link>
                </div>
                <div>
                    <Route path={'/hello/messge'} component={News}></Route>
                    <Route path={'/hello/news'} component={Messges}></Route>
                    <Redirect to={'/hello/messge'}></Redirect>
                </div>
            </div>
        );
    };
};

向路由组件传递参数

1.params参数

路由链接（携带参数）： <Link to={'/hello/messge/tom/18'}>详情</Link>
注册路由（声明接收）： <Route path={'/hello/messge/:name/:age'} component={Hello}></Route>
接收参数：this.props.match.params

2.search参数
路由链接（携带参数）<Link to={'/hello/messge?name=tom&age=18'}>详情</Link>
注册路由（无需声明，正常注册即可）<Route path={'/hello/messge'} component={Hello}></Route>
接收参数：this.props.location.search
备注：获取的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接（携带参数）<Link to={{pathname:'/hello/messge',state:{name:tom,age:18}}}>详情</Link>
注册路由（无需声明，正常注册即可）<Route path={'/hello/messge'} component={Hello}></Route>
接收参数：this.props.location.state
备注：刷新也保留