zoukankan      html  css  js  c++  java
  • React 入门(6): 路由 React-Router

    文档

    https://reactrouter.com/web/guides/quick-start

    → 安装react-router-dom

    npm install -S react-router-dom
    

    react-router是基础包, 现在React-Router也分为web和native两个分支.

    路由模式: history模式→Router hash模式→HashRouter

    React默认使用history模式, 要使用hash模式, 将HashRouter别名为Router即可:

    import { HashRouter as Router } from 'react-router-dom';
    

    组件: RouterSwitchRoute & RouterLink

    Switch和Link都必须是Router的children, 其中Switch是路由视图, Link是导航链接, 建议Switch使用一个div父容器包含.
    Route则必须是Switch的children.

        <Router>
            <Link to="/info">路由跳转</Link>
            <div>
                <Header />
                <div>
                    <Switch>
                        {/*路由规则*/ map_route}
                        {/* 这里的Index是React元素或者一个返回React元素的函数, 函数将被自动调用 */}
                        <Route path="/">{Index}</Route>
                    </Switch>
                </div>
            </div>
        </Router>
    

    Route组件

    Route组件定义了网页URI和页面组件的映射关系, 通过path参数和children参数来完成. 其中path可以是字符串, 而children可以是React元素或一个返回React元素的函数el_or_func.

    import { Pages, ReactPages, } from '@/pages/router';
    
    const map_route = ReactPages.map((el_or_func, index) => (
        <Route key={index} path={'/' + Pages[index]}>
            {/* 页面不是组件, 导出元素就不需要实例化Component对象再调用render函数 */}
            {/* {new it().render()} */}
            {/* 按理说这里每个页面的导出, 必须是React元素 */}
            {/* 但是经过验证, 函数组件也是可以的(严格地说应该是一个返回组件的函数), 无须作为函数调用, 这确实非常方便 */}
            {el_or_func}
        </Route>
    ));
    

    如果el_or_func是一个函数, 那么react-router将会调用该函数, 并传入一个route参数:

    END

  • 相关阅读:
    Python列表生成
    Python 多线程
    Python面向对象编程
    map, reduce和filter(函数式编程)
    35个高级python知识点
    python之pyc
    Python之简单的用户名密码验证
    EasyUI 实例
    hibernate映射文件one-to-one元素属性
    Java中多对多映射关系
  • 原文地址:https://www.cnblogs.com/develon/p/13667915.html
Copyright © 2011-2022 走看看