React Router 4.0 使用心得及案例

React-router-dom 使用笔记及简单案例

1.安装-两种方式
    (1) create-react-app name
    (2) npx create-react-app name

2.安装 react-router-dom 
    方法:
        cnpm install react-router-dom --save
    运用:
        react-router-dom 文档 (https://www.jianshu.com/p/97e4af32811a

        在项目入口文件(index.js)引入 react-router-dom;

        import { BrowserRouter, HashRouter, Link, NavLink, Prompt, MemoryRouter, Redirect, Route, Router, StaticRouter, Switch,} from react-router-dom

        <Router>所有 Router 组件的通用低阶接口。通常情况下,应用程序只会使用其中一个高阶 Router:
            
            // 高阶router包括   ******只允许有且只有一个子节点
            //  路由入口,组件下只允许存在一个子元素,如存在多个则会报错。
            <BrowserRouter>
            <HashRouter>
            <MemoryRouter>
            <NativeRouter>
            <StaticRouter>

        一个路由项目,常用的
            <BrowserRouter>
            <Route>
            <Link>
            <Switch>

3. Link 跳转页面 传值 
    (1)使用方法:
        A.to:string -- 链接到的路径名或位置。
            <Link to="/about">关于我们</Link>

      B.to:object --要链接的位置。
            <Link to={{
              pathname: '/courses',
              search: '?sort=name',
              hash: '#the-hash',
              state: { fromDashboard: true }
            }}/>
        
      C.repalce:bool
        如果为真,单击链接将替换历史堆栈中的当前条目,而不是添加新条目。

    (2) Link传值的坑人表现!(https://blog.csdn.net/cen_cs/article/details/78426164
        <Link to={{
          pathname: '/courses',
          search: '?sort=name',
          hash: '#the-hash',
          state: { fromDashboard: true }
        }}/>

        在下一个页面可以这样取到值 (通过props.location.state 取值)

        class CompName extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              param:props.location.state,
              search:props.location.search,
         }; 
         console.log("state-----:",this.props) }
        }

        *********但是,如果在Link里面加个 target="_blank", 这样的话, state里面的值就是undefined


4.Switch的用法(https://www.jianshu.com/p/ed5e56994f13?from=timeline
    <Switch>是唯一的因为它仅仅只会渲染一个路径。
    相比之下(不使用<Switch>包裹的情况下),每一个被location匹配到的<Route>将都会被渲染。

5.<Route>组件有如下属性:
    path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
    exact(bool):为true时,则要求路径与location.pathname必须完全匹配;
    strict(bool):true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname;
        eg:
            <Route strict path="/peoples/" component={Peoples} />  // 可匹配成功
            <Route strict path="/peoples" component={Peoples} />  // 不可匹配成功


6.path的匹配规则

    *** -路由匹配路径。(没有path属性的Route 总是会 匹配);

    :paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
    () – 在它内部的内容被认为是可选的
    * – 匹配任意字符(非贪婪的)直到命中下一个字符或者整个 URL 的末尾,并创建一个 splat 参数
    
    eg:
        <Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
        <Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael 和 /hello/ryan
        <Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

    匹配规则(案例):
        <Route path='/roster' />
        // 当前路径是   '/', 不满足匹配
        // 当前路径是   '/roster' 或 '/roster/2', 满足匹配
        // 如果只想匹配 '/roster', 需要使用"exact"参数
        // 下面的会匹配 '/roster', 但是不会匹配'/roster/2'.

        <Route exact path='/roster'/>
        // 你可能会发现你会为许多Route添加"exact"参数
        // 在未来的版本里(i.e. v5), "exact"参数可能会成为默认值
        // 更多信息请看 GitHub issue:
        // https://github.com/ReactTraining/react-router/issues/4958


7.区分-有状态组件和无状态组件  (https://segmentfault.com/a/1190000016774551

    有状态组件: 可包含 react的生命周期函数 (https://www.jianshu.com/p/c9bc994933d5)

    无状态组件: 主要为了接受父组件的参数,在页面进行渲染,不做其他处理

8.列表遍历渲染数据
    使用 map() 方法

9.react事件的注意事项
    
    onClick={this.delete} // 直接获取页面中已经定义额函数

    onClick={this.delete()} // 添加 () 页面加载即调用

    onClick={this.delete.bind()} // 添加 ()  可同时为函数添加 bind()方法 阻止直接运行


10.数据的更新
    react的数据统一放在 state={} 里面;

    数据更新类似微信小程序

    更新使用方法: (this.setState)
    this.setState({
        arr:newArray
    })


案例效果:
 
案例下载(百度云盘)地址:
链接:https://pan.baidu.com/s/1jpCVMVQj1EIlMuFgEN8CLw     提取码:7zz9 

评论