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';

组件: Router → Switch → Route & Router → Link

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